237 lines
6.7 KiB
JSON
237 lines
6.7 KiB
JSON
|
{
|
||
|
|
"type": "component",
|
||
|
|
"meta": {
|
||
|
|
"docsUrl": "https://v2.quasar.dev/vue-components/option-group"
|
||
|
|
},
|
||
|
|
"props": {
|
||
|
|
"size": {
|
||
|
|
"type": "String",
|
||
|
|
"desc": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)",
|
||
|
|
"examples": [
|
||
|
|
"16px",
|
||
|
|
"2rem",
|
||
|
|
"xs",
|
||
|
|
"md"
|
||
|
|
],
|
||
|
|
"category": "style"
|
||
|
|
},
|
||
|
|
"model-value": {
|
||
|
|
"desc": "Model of the component; Either use this property (along with a listener for 'update:model-value' event) OR use v-model directive",
|
||
|
|
"required": true,
|
||
|
|
"syncable": true,
|
||
|
|
"category": "model",
|
||
|
|
"type": "Any",
|
||
|
|
"examples": [
|
||
|
|
"v-model=\"group\""
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"options": {
|
||
|
|
"type": "Array",
|
||
|
|
"desc": "Array of objects with value, label, and disable (optional) props. The binary components will be created according to this array; Props from QToggle, QCheckbox or QRadio can also be added as key/value pairs to control the components singularly",
|
||
|
|
"definition": {
|
||
|
|
"label": {
|
||
|
|
"type": "String",
|
||
|
|
"desc": "Label to display along the component",
|
||
|
|
"required": true,
|
||
|
|
"examples": [
|
||
|
|
"Option 1",
|
||
|
|
"Option 2",
|
||
|
|
"Option 3"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"value": {
|
||
|
|
"type": "Any",
|
||
|
|
"desc": "Value of the option that will be used by the component model",
|
||
|
|
"required": true,
|
||
|
|
"examples": [
|
||
|
|
"op1",
|
||
|
|
"op2",
|
||
|
|
"op3"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"disable": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "If true, the option will be disabled"
|
||
|
|
},
|
||
|
|
"...props": {
|
||
|
|
"type": "Any",
|
||
|
|
"desc": "Any other props from QToggle, QCheckbox, or QRadio",
|
||
|
|
"examples": [
|
||
|
|
"val=\"car\"",
|
||
|
|
":true-value=\"trueValue\"",
|
||
|
|
"checked-icon=\"visibility\""
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"examples": [
|
||
|
|
":options=\"[ { label: 'Option 1', value: 'op1' }, { label: 'Option 2', value: 'op2' }, { label: 'Option 3', value: 'op3', disable: true } ]\""
|
||
|
|
],
|
||
|
|
"category": "model"
|
||
|
|
},
|
||
|
|
"name": {
|
||
|
|
"type": "String",
|
||
|
|
"desc": "Used to specify the name of the controls; Useful if dealing with forms submitted directly to a URL",
|
||
|
|
"examples": [
|
||
|
|
"car_id"
|
||
|
|
],
|
||
|
|
"category": "behavior"
|
||
|
|
},
|
||
|
|
"type": {
|
||
|
|
"type": "String",
|
||
|
|
"desc": "The type of input component to be used",
|
||
|
|
"values": [
|
||
|
|
"radio",
|
||
|
|
"checkbox",
|
||
|
|
"toggle"
|
||
|
|
],
|
||
|
|
"default": "radio",
|
||
|
|
"category": "content",
|
||
|
|
"required": false
|
||
|
|
},
|
||
|
|
"color": {
|
||
|
|
"type": "String",
|
||
|
|
"tsType": "NamedColor",
|
||
|
|
"desc": "Color name for component from the Quasar Color Palette",
|
||
|
|
"examples": [
|
||
|
|
"primary",
|
||
|
|
"teal",
|
||
|
|
"teal-10"
|
||
|
|
],
|
||
|
|
"category": "style"
|
||
|
|
},
|
||
|
|
"keep-color": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "Should the color (if specified any) be kept when input components are unticked?",
|
||
|
|
"category": "behavior"
|
||
|
|
},
|
||
|
|
"dark": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "Notify the component that the background is a dark color",
|
||
|
|
"category": "style"
|
||
|
|
},
|
||
|
|
"dense": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "Dense mode; occupies less space",
|
||
|
|
"category": "style"
|
||
|
|
},
|
||
|
|
"left-label": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "Label (if any specified) should be displayed on the left side of the input components",
|
||
|
|
"category": "content"
|
||
|
|
},
|
||
|
|
"inline": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "Show input components as inline-block rather than each having their own row",
|
||
|
|
"category": "content"
|
||
|
|
},
|
||
|
|
"disable": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "Put component in disabled mode",
|
||
|
|
"category": "state"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"slots": {
|
||
|
|
"label": {
|
||
|
|
"desc": "Generic slot for all labels",
|
||
|
|
"scope": {
|
||
|
|
"...self": {
|
||
|
|
"type": "Object",
|
||
|
|
"desc": "The corresponding option entry from the 'options' prop",
|
||
|
|
"definition": {
|
||
|
|
"label": {
|
||
|
|
"type": "String",
|
||
|
|
"desc": "Label to display along the component",
|
||
|
|
"required": true,
|
||
|
|
"examples": [
|
||
|
|
"Option 1",
|
||
|
|
"Option 2",
|
||
|
|
"Option 3"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"value": {
|
||
|
|
"type": "Any",
|
||
|
|
"desc": "Value of the option that will be used by the component model",
|
||
|
|
"required": true,
|
||
|
|
"examples": [
|
||
|
|
"op1",
|
||
|
|
"op2",
|
||
|
|
"op3"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"disable": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "If true, the option will be disabled"
|
||
|
|
},
|
||
|
|
"...props": {
|
||
|
|
"type": "Any",
|
||
|
|
"desc": "Any other props from QToggle, QCheckbox, or QRadio",
|
||
|
|
"examples": [
|
||
|
|
"val=\"car\"",
|
||
|
|
":true-value=\"trueValue\"",
|
||
|
|
"checked-icon=\"visibility\""
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"addedIn": "v2.2"
|
||
|
|
},
|
||
|
|
"label-[name]": {
|
||
|
|
"desc": "Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used",
|
||
|
|
"scope": {
|
||
|
|
"...self": {
|
||
|
|
"type": "Object",
|
||
|
|
"desc": "The corresponding option entry from the 'options' prop",
|
||
|
|
"definition": {
|
||
|
|
"label": {
|
||
|
|
"type": "String",
|
||
|
|
"desc": "Label to display along the component",
|
||
|
|
"required": true,
|
||
|
|
"examples": [
|
||
|
|
"Option 1",
|
||
|
|
"Option 2",
|
||
|
|
"Option 3"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"value": {
|
||
|
|
"type": "Any",
|
||
|
|
"desc": "Value of the option that will be used by the component model",
|
||
|
|
"required": true,
|
||
|
|
"examples": [
|
||
|
|
"op1",
|
||
|
|
"op2",
|
||
|
|
"op3"
|
||
|
|
]
|
||
|
|
},
|
||
|
|
"disable": {
|
||
|
|
"type": "Boolean",
|
||
|
|
"desc": "If true, the option will be disabled"
|
||
|
|
},
|
||
|
|
"...props": {
|
||
|
|
"type": "Any",
|
||
|
|
"desc": "Any other props from QToggle, QCheckbox, or QRadio",
|
||
|
|
"examples": [
|
||
|
|
"val=\"car\"",
|
||
|
|
":true-value=\"trueValue\"",
|
||
|
|
"checked-icon=\"visibility\""
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"addedIn": "v2.2"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|