# BaseOptions
a row that can display options responsively either hidden behind an options button or directly
# Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| showOptions | set showing of option buttons from outside. the .sync modifier (opens new window) may be used on this prop | boolean | - | false |
| optionsHidden | hide options completely (necessary if only before or after slot elements should remain) | boolean | - | false |
| alignOptions | define alignment of options button and options | string | left, right | 'right' |
| useOptionsButtonOn | define in which scenario an options button should be shown: always: always show the options button mobile: only show options button when window size < 640px never: never show the options button - just show the available options directly fitted: use options button whenever the actions (incl. before and after slot) do not fit the row anymore | string | always, mobile, never, fitted | 'always' |
| optionsButtonText | define the options button text as an object with show (=text that should beshown with options hidden) and hide (=text that should be shown with options visible)values can be either plain strings or a string leading to a localization file. (only relevant if useOptionsButtonOn is different from 'never') | object | - | { show: 'options', hide: 'return' } |
| optionsButtonIcon | define the icon for the options button as an object with show (=icon that should beshown with options hidden) and hide (=icon that should be shown with options visible)see BaseIcon for available icons. (only relevant if useOptionsButtonOn is different from 'never') | object | - | { show: 'options-menu', hide: 'remove' } |
| showAfterOptionsBelow | define if slot after-options should be shown before or after options. if row wraps because of space issues (only relevant with use of options button) | boolean | - | true |
| optionsConfig | in order to display options one can either use the slot options or specify aconfig via optionsConfig prop. If the latter option is used the following propertiesneed to be provided: text string - the text displayed in the buttonicon string - the icon name to display(for available icons see BaseIcon ) value string - the value emitted on button clickdisabled boolean? - should button be shown as disabled | array | - | [{ text: 'delete', icon: 'waste-bin', value: 'delete', disabled: false, }] |
| disableOptions | specify an array of values set in optionsConfig property valuefor options that should appear disabled. This is equivalent to and just a more convenient way than to set the optionsConfig property disabled | array | - | [] |
| optionsButtonDisabled | set true if options button should be disabled not relevant for useOptionsButtonOn with value never | boolean | - | false |
# Events
| Event name | Properties | Description |
|---|---|---|
| update:show-options | undefined boolean - was show value set true or false | emitted when options button is toggled (not relevant if useOptionsButtonOn propis set to 'never') the .sync modifier can be used on showOptions prop here |
| option-triggered | undefined string - the value provided in optionsConfig object | emitted if prop optionsConfig is used when an options button is clicked |
# Slots
| Name | Description | Bindings |
|---|---|---|
| beforeOptions | add an element before the options e.g. a header | |
| options | add the actual options | |
| afterOptions | add elements after the options element |
# Demo
A simple example with options button and different useOptionsButtonOn settings.
Resize to see the 'mobile' effect!
Advanced example with all slots filled. Choose different settings for available properties below and resize to see the different effects!
An more real-life example with after options slot rendered below options if space runs out.