quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
255 lines • 6.91 kB
JSON
{
"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",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"text-color": {
"type": "String",
"desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style"
},
"toggle-color": {
"type": "String",
"desc": "Color name for component from the Quasar Color Palette",
"examples": [
"primary",
"teal-10"
],
"category": "style",
"default": "primary",
"required": false
},
"toggle-text-color": {
"type": "String",
"desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
"examples": [
"primary",
"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"
}
}
}