# Components

# Alert

template

<template>
  <SBAlert>primary alert—check it out!</SBAlert>

  <!-- add background-color -->
  <SBAlert variant="secondary">secondary alert—check it out!</SBAlert>
</template>

import { SBAlert } from 'superbvue'

export default defineComponent({
  components: {
    SBAlert
  }
})

Output

A simple primary alert—check it out!

A simple secondary alert—check it out!

jsx

import { SBAlert } from 'superbvue'

export default defineComponent({
  render() {
    return (
      <div>
        <SBAlert>primary alert—check it out!</SBAlert>

        // add background-color
        <SBAlert variant="secondary">secondary alert—check it out!</SBAlert>
      </div>
    )
  }
})

Output

A simple primary alert—check it out!

A simple secondary alert—check it out!

SBAlert Property

Property	Type	Default	Description
disabled	Boolean	false	disable element for clickable
onClick	Function		callback function payload: `$event`
class	String
variant	String		Set background color. `primary \| secondary \| success \| danger \| warning \| info \| light \| dark`

# Badge

template

<template>
  <SBBadge>my badge</SBBadge>

  <!-- pill badge1 -->
  <SBBadge pill>my pill badge</SBBadge>
</template>

import { SBBadge } from 'superbvue'

export default defineComponent({
  components: {
    SBBadge
  }
})

Output

Example heading my badge

my pill badge

jsx

import { SBBadge } from 'superbvue'

export default defineComponent({
  render() {
    return (
      <div>
        <SBBadge>my badge</SBBadge>
  
         // pill badge
        <SBBadge pill>my pill badge</SBBadge>
      </div>
    )
  }
})

Output

Example heading my badge

my pill badge

Property	Type	Description
pill	Boolean	badges more rounded
class	String
href	String
variant	String	Set background color. `primary \| secondary \| success \| danger \| warning \| info \| light \| dark`

template

<template>
  <SBBreadcrumb :items="state.items" />
</template>

export default defineComponent({
  data() {
    return {
      state: {
        items: [
          { text: 'Home', href: "/", active: false }, 
          { text: 'Library', href: "/library", active: true }
        ]
      }
    }
  }
})

Output

jsx

export default defineComponent({
  data() {
    return {
      state: {
        items: [
          { text: 'Home', href: "/", active: false }, 
          { text: 'Library', href: "/library", active: true }
        ]
      }
    }
  },
  render() {
    return (
      <Fragment>
        <SBBreadcrumb items={this.state.items} />
      </Fragment>
    )
  }
})

Output

Property	Type	Default	Description
items	Array of object		see SBBreadCrumbItem for info

# Button

template

<template>
  <SBButton variant="primary">Primary</SBButton>
  <SBButton size="lg">Large button</SBButton>
</template>

Output

jsx

export default defineComponent({
  render() {
    return (
      <Fragment>
        <SBButton variant="primary">Primary</SBButton>
        <SBButton size="lg">Large button</SBButton>
      </Fragment>
    )
  }
})

Output

Property	Type	Default	Description
disabled	Boolean	false	disable button state
toggle	Boolean	false
pressed	Boolean	false	gives the button the appearance of being pressed
block	Boolean	false	full-width, “block buttons”
pill	Boolean	false	button with the pill style appearance
squared	Boolean	false	button with non-rounded corners
active	Boolean	false	active state with active styling
size	String	md	Set button size. `sm \| md \| lg`
type	String	button
variant	String		Set color on button. `primary \| secondary \| success \| danger \| warning \| info \| light \| dark`

# Card

template

<template>
  <SBCard style="max-width: 20rem;" class="mb-2" imgAlt="Image" imgSrc="https://picsum.photos/600/300/?image=25" imgTop>
    <SBCardTitle textTag="h4">Some quick example text to build on the card title and make up the bulk of the card's content.</SBCardTitle>
    <SBButton variant="primary">Go somewhere</SBButton>
  </SBCard>
</template>

Output

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<template>
  <!-- List groups -->
  <SBCard style="max-width: 20rem;">
    <SBListgroup>
      <SBListgroupItem>Cras justo odio</SBListgroupItem>
      <SBListgroupItem>Dapibus ac facilisis in</SBListgroupItem>
      <SBListgroupItem>Vestibulum at eros</SBListgroupItem>
    </SBListgroup>
  </SBCard>
</template>

Output

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<template>
  <!-- Header Bordered Card -->
  <SBCard class="text-center" title="Card title" header="Primary header" headerBgVariant="primary" headerTextVariant="white">
    <SBCardTitle>Some quick example text to build on the card title and make up the bulk of the card's content.</SBCardTitle>
  </SBCard>
</template>

Output

Primary header

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

jsx

export default defineComponent({
  render() {
    return (
      <Fragment>
        <SBCard style="max-width: 20rem;" class="mb-2" imgAlt="Image" imgSrc="https://picsum.photos/600/300/?image=25" imgTop>
          <SBCardTitle textTag="h4">Some quick example text to build on the card title and make up the bulk of the card's content.</SBCardTitle>
          <SBButton variant="primary">Go somewhere</SBButton>
        </SBCard>
      </Fragment>
    )
  }
})

Output

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

export default defineComponent({
  render() {
    return (
      <Fragment>
        {/* List groups */}
        <SBCard style="max-width: 20rem;">
          <SBListgroup>
            <SBListgroupItem>Cras justo odio</SBListgroupItem>
            <SBListgroupItem>Dapibus ac facilisis in</SBListgroupItem>
            <SBListgroupItem>Vestibulum at eros</SBListgroupItem>
          </SBListgroup>
        </SBCard>
      </Fragment>
    )
  }
})

Output

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

export default defineComponent({
  render() {
    return (
      <Fragment>
        {/* Header Bordered Card */}
        <SBCard class="text-center" title="Card title" header="Primary header" headerBgVariant="primary" headerTextVariant="white">
          <SBCardTitle>Some quick example text to build on the card title and make up the bulk of the card's content.</SBCardTitle>
        </SBCard>
      </Fragment>
    )
  }
})

Output

Primary header

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

SBCard Property

Property	Type	Description
title	String	Text content to place in the title
imgSrc	String	URL for the optional image
imgTop	Boolean	image should appear at the top of the card
imgBottom	Boolean	image should appear at the bottom of the card
imgWidth	String
imgHeight	String
imgAlt	String	Value to set the image attribute 'alt'
overlay	Boolean	will overlay the card body on top of the image
borderVariant	Boolean	Bootstrap theme color variants to the body border
header	String	Text content to place in the header
headerBgVariant	String	Bootstrap theme color variants to the header background
headerTextVariant	String	Bootstrap theme color variants to the header text
align	String
class	String
id	String
style	String

SBCardTitle Property

Property	Type	Default	Description
textTag	String	'h4'	Specify the HTML tag to render instead of the default tag for the title

SBCardListgroup Property

Property	Type	Description
flush	Boolean

# Navs & tabs

template

<template>
  <SBNavs>
    <SBNavLink active>Active</SBNavLink>
    <SBNavLink>Link</SBNavLink>
    <SBNavLink>Another Link</SBNavLink>
    <SBNavLink disabled>Disabled Link</SBNavLink>
  </SBNavs>
</template>

Output

jsx

export default defineComponent({
  render() {
    return (
      <Fragment>
        <SBNavs>
          <SBNavLink active>Active</SBNavLink>
          <SBNavLink>Link</SBNavLink>
          <SBNavLink>Another Link</SBNavLink>
          <SBNavLink disabled>Disabled Link</SBNavLink>
        </SBNavs>
      </Fragment>
    )
  }
})

Output

SBNavs Property

Property	Type	Default	Description
value	Number
justify	Boolean		horizontal alignment
tabs	Boolean
vertical	Boolean		stack them
pills	Boolean		navs more rounded
class	String
style	String
id	String
size	String	md	set nav size. `sm \| md \| lg`

SBNavLink Property

Property	Type	Default	Description
href	String
rel	String		horizontal alignment
target	String
active	Boolean
disabled	Boolean		disable element for clickable
to	String
append	Boolean
replace	Boolean
activeClass	String
exact	Boolean
exactActiveClass	String
style	String
id	String
size	String	md	set nav size. `sm \| md \| lg`

# Progress

template

<template>
  <SBProgress :value="state.progressValue" variant="warning" />

  <!-- Add label -->
  <SBProgress :value="state.progressValue" :label="state.progressValue" variant="warning" />

  <!-- Multiple Progress bars -->
  <SBProgress max="100" :label="state.progressValue">
    <SBProgressBar :value="state.progressValue" :label="state.value" variant="warning" />
    <SBProgressBar :value="20" :label="state.value" variant="success" />
  </SBProgress>
</template>

import { SBProgress, SBProgressBar } from 'superbvue'

export default defineComponent({
  components: {
    SBProgress,
    SBProgressBar
  },
  setup() {
    const state = reactive({
      progressValue: 75
    })

    return {
      state
    }
  }
})

Output

Progress bar

Progress bar with label

50%

Multiple Progress bars

80%

20%

jsx

import { SBProgress, SBProgressBar } from 'superbvue'

export default defineComponent({
  setup() {
    const state = reactive({
      progressValue: 75
    })

    return {
      state
    }
  },
  render() {
    return (
      <div>
        <SBProgress value={this.state.progressValue} variant="warning" />

        // Add label
        <SBProgress value={this.state.progressValue} label={this.state.progressValue} variant="warning" />

        // Multiple Progress bars
        <SBProgress max={100} label={this.state.progressValue} variant="warning">
          <SBProgressBar value={this.state.progressValue} label={this.state.progressValue} variant="warning" />
        </SBProgress>
      </div>
    )
  }
})

Output

Progress bar

Progress bar with label

50%

Multiple Progress bars

80%

20%

Property	Type	Description
value	Number
striped	Boolean	Striped
animated	Boolean	Animated stripes
height	String
showProgress	Boolean	Displays the current progress value as a percentage
showValue	Boolean	Displays the current progress value
variant	String	Set background color. `primary \| secondary \| success \| danger \| warning \| info \| light \| dark`

# Pagination

template

<template>
  <SBPagination v-bind:totalRows="row" v-model="state.currentPage" v-bind:perPage="state.perPage" />
</template>

import { SBPagination } from 'superbvue'

export default defineComponent({
  components: {
    SBPagination
  },
  data() {
    return {
      state: {
        items: [
          { age: 45, fistName: 'Jonhson', lastName: 'Macdonald' },
          { age: 15, fistName: 'Larsen', lastName: 'Shaw' },
          { age: 65, fistName: 'Geneva', lastName: 'Wilson' },
          { age: 35, fistName: 'Jami', lastName: 'Carney' }
        ],
        fields: ['Age', 'First Name', 'Last Name'],
        perPage: '3',
        currentPage: 1
      }
    }
  }
})

Output

Button variant

<template>
  <!-- Basic Button variant -->
  <SBPagination v-bind:totalRows="row" v-model="state.currentPage" v-bind:perPage="state.perPage" />

  <!-- Alignment -->
  <SBPagination v-bind:totalRows="state.row" v-model="state.currentPage" v-bind:perPage="state.perPage" align="center" />
  
  <!-- Use text in props -->
  <SBPagination v-bind:totalRows="state.row" v-model="state.currentPage" prevText="Prev" lastText="Next" v-bind::perPage="state.perPage" ariaLabel="my-custon-pagination" />
</template>

<script>
import { SBPagination } from 'superbvue'

export default defineComponent({
  components: {
    SBPagination
  },
  data() {
    return {
      state: {
        rows: 100
        perPage: '3',
        currentPage: 1
      }
    }
  }
})
</script>

Output

Basic Button variant

Alignment

Use text as button

jsx

import { SBTable } from 'superbvue'

export default defineComponent({
  data() {
    return {
      state: {
        items: [
          { age: 45, fistName: 'Jonhson', lastName: 'Macdonald' },
          { age: 15, fistName: 'Larsen', lastName: 'Shaw' },
          { age: 65, fistName: 'Geneva', lastName: 'Wilson' },
          { age: 35, fistName: 'Jami', lastName: 'Carney' }
        ],
        fields: ['Age', 'First Name', 'Last Name'],
        perPage: 3,
        currentPage: 1,
      }
    }
  },
  methods: {
    handleSetCurrentPage(event) {
      this.state.currentPage = event.target.value
    }
  },
  render() {
    return (
      <Fragment>
        <SBPagination totalRows={this.row} onChange={this.handleSetCurrentPage} modelValue={this.state.currentPage} perPage={this.state.perPage} ariaLabel="my-custon-pagination" />
      </Fragment>
    )
  }
})

Output

Button variant

import { SBTable } from 'superbvue'

export default defineComponent({
  data() {
    return {
      state: {
        rows: 100
        perPage: '3',
        currentPage: 1
      }
    }
  },
  render() {
    return (
      <Fragment>
        {/* Basic Button variant */}
        <SBPagination totalRows={this.state.row} perPage={this.state.perPage} />

        {/* Alignment */}
        <SBPagination totalRows={this.state.row} perPage={this.state.perPage} align="center" />
        
        {/* Use text in props */}
        <SBPagination totalRows={this.state.row} prevText="Prev" lastText="Next" perPage={this.state.perPage} ariaLabel="my-custon-pagination" />
      </Fragment>
    )
  }
})

Output

Basic Button variant

Alignment

Use text as button

Pagination Component Property

Property	Type	Default	Description
perPage	String \| Number		table header
totalRows	String \| Number		table data in array format, where each record (row) data are keyed objects.
ariaControls	String		Set ID on element
ariaLabel	String		Value to place in the "aria-label" attribute of the pagination control
disabled	String	false
labelFirstPage	String	"Go to first page"
labelLastPage	String	"Go to last page"
labelNextPage	String	"Go to next page"
labelPrevPage	String	"Go to prev page"
firstText	String	"«"
lastText	String	"»"
nextText	String
prevText	String
limit	String \| Number
size	String	"md"	size of pagination. value: sm \| md \| lg
class	String
pills	Boolean	false

# Spinners

template

<template>
  <SBSpinners />
  <SBSpinners type="glow" />
</template>

Output

Border spinner

Growing spinner

jsx

export default defineComponent({
  render() {
    return (
      <Fragment>
        <SBSpinners />
        <SBSpinners type="glow" />
      </Fragment>
    )
  }
})

Output

Border spinner

Growing spinner

Property	Type	Default	Description
label	Boolean	false
type	String	border	Set spinner type. `border \| glow`
small	Boolean	false	When set, rendered a smaller spinner suitable for placing in buttons
variant	Boolean	false	Applies one of the Bootstrap theme color variants to the component
class	String	false
squared	Boolean	false

# Table

template

<template>
  <!-- Basic table -->
  <SBTable v-bind:fields="state.fields" v-bind:items="state.items" />
</template>

import { SBTable } from 'superbvue'

export default defineComponent({
  components: {
    SBTable
  },
  data() {
    return {
      state: {
        items: [
          { age: 45, fistName: 'Jonhson', lastName: 'Macdonald' },
          { age: 15, fistName: 'Larsen', lastName: 'Shaw' },
          { age: 65, fistName: 'Geneva', lastName: 'Wilson' },
          { age: 35, fistName: 'Jami', lastName: 'Carney' }
        ],
        fields: ['Age', 'First Name', 'Last Name']
      }
    }
  }
})

Output

Age	First Name	Last Name
45	Jonhson	Macdonald
15	Larsen	Shaw
65	Geneva	Wilson
35	Jami	Carney

Using variants for table cells

<template>
  <!-- Using variants for table cells -->
  <SBTable v-bind:fields="state.fields" v-bind:items="state.items" />
</template>

import { SBTable } from 'superbvue'

export default defineComponent({
  components: {
    SBTable
  },
  data() {
    return {
      state: {
        items: [
          { age: 40, fistName: 'Dickerson', lastName: 'Macdonald' },
          { age: 21, fistName: 'Larsen', rowVariant: 'primary', lastName: 'Shaw' },
          { age: 89, fistName: 'Geneva', lastName: 'Wilson' },
          { age: 38, fistName: 'Jami', lastName: 'Carney', cellVariant: { fistName: 'info' } }
        ],
        fields: ['Age', 'First', 'last']
      }
    }
  }
})

Output

Age	First Name	Last Name
40	Dickerson	Macdonald
21	Larsen	Shaw
89	Geneva	Wilson
38	Jami	Carney

jsx

import { SBTable } from 'superbvue'

export default defineComponent({
  data() {
    return {
      state: {
        items: [
          { age: 45, fistName: 'Jonhson', lastName: 'Macdonald' },
          { age: 15, fistName: 'Larsen', lastName: 'Shaw' },
          { age: 65, fistName: 'Geneva', lastName: 'Wilson' },
          { age: 35, fistName: 'Jami', lastName: 'Carney' }
        ],
        fields: ['Age', 'First Name', 'Last Name']
      }
    }
  },
  render() {
    return (
      <Fragment>
        {/*  Basic table */}
        <SBTable fields={this.state.field} items={this.state.items} currentPage={this.state.currentPage} perPage={this.state.perPage} />
      </Fragment>
    )
  }
})

Output

Age	First Name	Last Name
45	Jonhson	Macdonald
15	Larsen	Shaw
65	Geneva	Wilson
35	Jami	Carney

Using variants for table cells

import { SBTable } from 'superbvue'

export default defineComponent({
  data() {
    return {
      state: {
        items: [
          { age: 40, fistName: 'Dickerson', lastName: 'Macdonald' },
          { age: 21, fistName: 'Larsen', lastName: 'Shaw',  rowVariant: 'primary' },
          { age: 89, fistName: 'Geneva', lastName: 'Wilson' },
          { age: 38, fistName: 'Jami', lastName: 'Carney', cellVariant: { fistName: 'info' } }
        ],
        fields: ['Age', 'First', 'last']
      }
    }
  },
  render() {
    return (
      <Fragment>
        {/*  Using variants for table cells */}
        <SBTable fields={this.state.field} items={this.state.items} currentPage={this.state.currentPage} perPage={this.state.perPage} />
      </Fragment>
    )
  }
})

Output

Age	First Name	Last Name
40	Dickerson	Macdonald
21	Larsen	Shaw
89	Geneva	Wilson
38	Jami	Carney

Table Component Property

Property	Type	Description
fields	String []	table header
items	Object []	table data in array format, where each record (row) data are keyed objects.
striped	Boolean	add zebra-striping to any table row
hover	Boolean	enable a hover state on table rows
class	String
squared	Boolean
currentPage	Number \| String	The current page number to display when the table is paginated. Starting from 1 and up
perPage	Number \| String	Number of rows to show per page. Set to 0 to disable pagination
dark	Boolean	Places the table in dark mode
cellVariants	Object	variants map to classes table-${variant}
rowVariant	String	variants map to classes table-${variant}

#

← Layout and Grid System Form →

# Components

# Alert

# Badge

Example heading my badge

Example heading my badge

# Breadcrumb

# Button

# Card

Card title

Card title

Card title

Card title

# Navs & tabs

# Progress

# Pagination

Basic Button variant

Alignment

Use text as button

Basic Button variant

Alignment

Use text as button

# Spinners

# Table

#