SuperBVue

# 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

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

SBAlert Property

PropertyTypeDefaultDescription
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 Default 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

PropertyTypeDescription
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

PropertyTypeDefaultDescription
textTag String 'h4' Specify the HTML tag to render instead of the default tag for the title

SBCardListgroup Property

PropertyTypeDescription
flush Boolean

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 Default 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

PropertyTypeDefaultDescription
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

AgeFirst NameLast 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

AgeFirst NameLast 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

AgeFirst NameLast 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

AgeFirst NameLast Name
40 Dickerson Macdonald
21 Larsen Shaw
89 Geneva Wilson
38 Jami Carney

Table Component Property

PropertyTypeDescription
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}

#

← Form →