Buttons

  1. <va-button
  2.  outline
  3.  color="success"
  4.  icon="brandico brandico-facebook"
  5. >
  6.  Button 1
  7. </va-button>
  8.  
  9. <va-button
  10.  flat large
  11.  color="info"
  12.  icon="brandico brandico-facebook"
  13.  icon-right="iconicstroke iconicstroke-info"
  14. >
  15.  Button 2
  16. </va-button>
  17.  
  18. <va-button
  19.  small color="warning"
  20.  icon-right="iconicstroke iconicstroke-info"
  21.  href="http://epic-spinners.epicmax.co/"
  22. >
  23.  Button 3
  24. </va-button>
  25.  
  26. <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 v-bind:outline="true" to set outline type of button
  • flat - Boolean - use v-bind: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 v-bind:small="true" to set small size of modal
  • large - Boolean - use v-bind:large="true" to set large size of modal
  • icon - Boolean - use v-bind:icon="true" to set icon from the left side of the button
  • iconRight - Boolean - use v-bind:iconRight="true" to set icon from the right side of the button
  • type - String - native attribute for button
  • 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

Button groups

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

  1. <va-button-group>
  2.  <va-button color="danger" icon="maki maki-art-gallery"> First </va-button>
  3.  <va-button color="danger"> Second </va-button>
  4.  <va-button color="danger"> Third </va-button>
  5. </va-button-group>
  6.  
  7. <va-button-group>
  8.  <va-button color="dark"> One </va-button>
  9.  <va-button color="dark"> Two </va-button>
  10.  <va-button color="dark"> Three </va-button>
  11.  <va-button color="dark" icon="ion-ios-arrow-down arrow-down"/>
  12. </va-button-group>

Used without any props. Buttons are inserted in default slot.

Button toggles

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

  1. <va-button-toggle 
  2.   v-model="model"
  3.   options="options"
  4.   toggle-color="warning"/>
  1. export default {
  2.   data () {
  3.     return {
  4.       options: [
  5.         { label: 'One', value: 'one' },
  6.         { label: 'Two', value: 'two' },
  7.         { label: 'Three', value: 'three' }
  8.       ],
  9.       model: 'two'
  10.     }
  11.   }
  12. }

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.

Pagination

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

  1. <va-pagination
  2.  small
  3.  :pages="10" 
  4.  color="success"
  5.  v-model="activePage"
  6. />
  7.  
  8. <va-pagination
  9.  :pages="10" 
  10.  :visible-pages="3"
  11.  :icon="{ direction: 'fa fa-volume-off' }"
  12.  :boundary-links="false"
  13.  v-model="activePage"
  14. />
  1. export default {
  2.   data () {
  3.     return {
  4.       activePage: 2
  5.     }
  6.   }
  7. }

Props

  • value - Number - value of active button in pagination component.
  • length - Number (default: 5) - amount of buttons (instead of navigation buttons) that are shown in the component at one moment.
  • totalPages - 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!