# BaseSwitchButton
accessible tab switch buttons
# Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| options | specify the tabs as array of object with value, label and (optional) icon properties | array | - | [{ label: 'tab', value: 'tab', icon: '' }] |
| v-model | set the currently active tab (specify the value of the object not the label) | string | - | () => (this.options[0] ? this.options[0].value : 'tab') |
| label | set a label for the switches, not visible per default (set showLabel to true if label should be shown) but required for accessibility | string | - | |
| type | set a type for the button's active state rendering style normal: gives the switch a more subtle, more condensed look with active item only indicated by grey border, buttons have a label per default ( showButtonsLabel is true).prominent: larger buttons with more spacing and permanent border around each item, active item is indicated by a 2px (app-)colored bottom border, button labels are not shown per default ( showButtonsLabel is false)so the property icon should be set for each switch item in options. | string | normal, prominent | 'normal' |
| showLabel | set if the switch label is shown | boolean | - | false |
| showButtonsLabel | define if the label of the single buttons should be shown (or just icons). This property is default undefined and is determined internally individually for each type: normal: default is trueprominent: default is false | boolean | - | undefined |
| iconPosition | specify where the icon should be rendered | string | right, left | 'right' |
| iconSize | specify icon size this prop currently only applies to type 'prominent' | string | small, medium, large | 'medium' |
| disabled | set true if the buttons should be visible but disabled, so they will appear greyed out and not be clickable | boolean | - | false |
# Events
| Event name | Properties | Description |
|---|---|---|
| switch | undefined string - the value of the selected option object | Event emitted on options switch, value of options object is emitted |
# Slots
| Name | Description | Bindings |
|---|---|---|
| right-of-content | slot to display something right of text (e.g. icon), or if showButtonsLabel false - generally right of the button content | value string - the value of the option object |
# Demo
# Type: normal
Type
normal gives the switch a more subtle, more condensed look with active item only indicated by grey border,
buttons have a label per default (showButtonsLabel is true).
# Type: prominent
Type
prominent has larger buttons with more spacing and permanent border around each item, active item is
indicated by a 2px (app-)colored bottom border, button labels are not shown per default (showButtonsLabel is false)
so the property icon should be set for each switch item in options.