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 v-model directive 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 options (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 be shown 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 be shown 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 a config via optionsConfig prop. If the latter option is used the following properties need to be provided: text string - the text displayed in the button icon string - the icon name to display (for available icons see BaseIcon ) value string - the value emitted on button click disabled 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 value for 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
option-triggered	undefined string - the value provided in optionsConfig object	emitted if prop optionsConfig is used when an options button is clicked
update:show-options

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.