quasar/dist/api/QBtnToggle.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{"type":"component","meta":{"docsUrl":"https://v2.quasar.dev/vue-components/button-toggle"},"props":{"name":{"type":"String","desc":"Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL","examples":["'car_id'"],"category":"behavior"},"model-value":{"desc":"Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive","required":true,"syncable":true,"category":"model","type":"Any","examples":["# v-model=\"selected\""]},"options":{"type":"Array","desc":"Array of Objects defining each option","required":true,"definition":{"attrs":{"type":"Object","desc":"Key-value for attributes to be set on the button","examples":["{ 'aria-label': 'Button label' }"]},"label":{"type":"String","desc":"Label of option button; Use this prop and/or 'icon', but at least one is required","examples":["'Option 1'"]},"icon":{"type":"String","desc":"Icon of option button; Use this prop and/or 'label', but at least one is required","examples":["'map'","'ion-add'","'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'","'img:path/to/some_image.png'"],"category":"content"},"value":{"type":"Any","desc":"Value of the option that will be used by component model","required":true},"slot":{"type":"String","desc":"Slot name to use for this button content; Useful for customizing content or even add tooltips","examples":["'mySlot'"]},"...props":{"type":"Any","desc":"Any other QBtn props (including class and style)"}},"examples":["[ { label: 'One', value: 'one' }, { label: 'Two', value: 'two' } ]"],"category":"model"},"color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"text-color":{"type":"String","tsType":"NamedColor","desc":"Overrides text color (if needed); Color name from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"toggle-color":{"type":"String","tsType":"NamedColor","desc":"Color name for component from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style","default":"'primary'","required":false},"toggle-text-color":{"type":"String","tsType":"NamedColor","desc":"Overrides text color (if needed); Color name from the Quasar Color Palette","examples":["'primary'","'teal'","'teal-10'"],"category":"style"},"spread":{"type":"Boolean","desc":"Spread horizontally to all available space","category":"content"},"outline":{"type":"Boolean","desc":"Use 'outline' design","category":"style"},"flat":{"type":"Boolean","desc":"Use 'flat' design","category":"style"},"unelevated":{"type":"Boolean","desc":"Remove shadow","category":"style"},"rounded":{"type":"Boolean","desc":"Applies a more prominent border-radius for a squared shape button","category":"style"},"push":{"type":"Boolean","desc":"Use 'push' design","category":"style"},"glossy":{"type":"Boolean","desc":"Applies a glossy effect","category":"style"},"size":{"type":"String","desc":"Button size name or a CSS unit including unit name","examples":["'xs'","'sm'","'md'","'lg'","'xl'","'25px'","'2rem'"],"category":"style"},"padding":{"type":"String","desc":"Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set","examples":["'16px'","'10px 5px'","'2rem'","'xs'","'md lg'","'2px 2px 5px 7px'"],"category":"style"},"no-caps":{"type":"Boolean","desc":"Avoid turning label text into caps (which happens by default)","category":"content"},"no-wrap":{"type":"Boolean","desc":"Avoid label text wrapping","category":"content"},"ripple":{"type":["Boolean","Object"],"desc":"Configure material ripple (disable it by setting it to 'false' or supply a config object)","default":"true","examples":["false","{ early: true, center: true, color: 'teal', keyCodes: [] }"],"category":"style","required":false},"dense":{"type":"Boolean","desc":"Dense mode; occupies less space","category":"style"},"readonly":{"type":"Boolean","desc":"Put component in readonly mode","category":"state"},"disable":{"type":"Boolean","desc":"Put component in disabled mode","category":"state"},"stack":{"type":"Boolean","desc":"Stack icon and label vertically instead of on same line (like it is by default)","category":"content"},"stretch":{"type":"Boolean","desc":"When used on flexbox parent, button will stretch to parent's height","category":"content"},"clearable":{"type":"Boolean","desc":"Clears model on click of the already selected button","category":"model"}},"slots":{"default":{"desc":"Suggestions: QTooltip, QBadge"},"...":{"desc":"Any other dynamic slots to be used with 'slot' property of the 'options' prop"}},"events":{"update:model-value":{"desc":"Emitted when the component needs to change the model; Is also used by v-model","params":{"value":{"type":"Any","desc":"New model value","required":true}}},"clear":{"desc":"When using the 'clearable' property, this event is emitted when the already selected button is clicked"}}}