Buttons

Components

• va-button
• va-button-group
• va-button-toggle
• va-pagination

va-button

<va-button
 outline
 color="success"
 icon="brandico brandico-facebook"
>
 Button 1
</va-button>

<va-button
 flat large
 color="info"
 icon="brandico brandico-facebook"
 icon-right="iconicstroke iconicstroke-info"
>
 Button 2
</va-button>

<va-button
 small color="warning"
 icon-right="iconicstroke iconicstroke-info"
 href="http://epic-spinners.epicmax.co/"
>
 Button 3
</va-button>

<va-button outline small icon="ion-md-close ion"/>

Props

• tag - String (default: 'button') - use this property to set the tag of element, which behaviour is more suitable for your button.
• outline - Boolean - use :outline="true" to set outline type of button
• flat - Boolean - use :flat="true" to set flat type of button
• color - String (default: 'success') - use this property to set the color of the button. We can choose one color from a set of theme colors (primary, secondary, info, error, warning)
• small - Boolean - use :small="true" to set small size of modal
• large - Boolean - use :large="true" to set large size of modal
• icon - String
• iconRight - String
• type - String - native attribute for button
• disabled - Boolean
• href - String - native attribute for a-link button
• target - String - native attribute for a-link button
• to - String - native attribute for router-link
• replace - Boolean - native attribute for router-link button
• append - Boolean - native attribute for router-link button
• to - String | Object - native attribute for router-link button
• exact - Boolean - native attribute for router-link button
• exactActiveClass - String - native attribute for router-link button

References

• Router-link: https://router.vuejs.org/api/

va-button-group

This component is used to group set of buttons. Buttons in this case save their pre-defined behaviour.

<va-button-group>
 <!-- va-button items -->
</va-button-group>

Props

• color - String (default: 'success')

va-button-toggle

This component is used as an alternative for radio-button.

<va-button-toggle 
  v-model="model"
  options="options"
  toggle-color="warning"/>

export default {
  data () {
    return {
      options: [
        { label: 'One', value: 'one' },
        { label: 'Two', value: 'two' },
        { label: 'Three', value: 'three' }
      ],
      model: 'two'
    }
  }
}

Props

• options - Array. Contains objects with value and label properties. Button entities will be created according to this array.
• value - String. Value of active button in button toggle component.
• toggle-color - String. Set color of active button in button toggle component. Toggle colors variety is the same as variety of colors for buttons.
• outline - Boolean.
• flat - Boolean.
• disabled - Boolean.
• color - String.
• small - Boolean.
• large - Boolean.

va-pagination

This component is used to separate data, what helps user to receive information easier. Integrated in tables and lists.

<va-pagination
 small
 :pages="10" 
 color="success"
 v-model="activePage"
/>

<va-pagination
 :pages="10" 
 :visible-pages="3"
 :icon="{ direction: 'fa fa-volume-off' }"
 :boundary-links="false"
 v-model="activePage"
/>

export default {
  data () {
    return {
      activePage: 2
    }
  }
}

Props

• value - Number - value of active button in pagination component.
• visiblePages - Number (default: 5) - amount of buttons (instead of navigation buttons) that are shown in the component at one moment.
• pages - Number - amount of all pages. If it is not specified, it is equal to length value.
• disabled - Boolean.
• small - Boolean.
• large - Boolean.
• color - String (default: 'info').
• boundaryLinks - Boolean - shows boundary ('>>', '<<') icons.
• directionLinks - Boolean - shows direction ('>', '<') icons.
• icon - Object (default: { direction: 'fa fa-angle-left', boundary: 'fa fa-angle-double-left' }) - change left icons. Values of object properties are icon classes.
• iconRight - Object (default: { direction: 'fa fa-angle-right', boundary: 'fa fa-angle-double-right' }) - change right icons. Values of object properties are icon classes.

Find DEMOs here!