146 lines
No EOL
4.3 KiB
JSON
146 lines
No EOL
4.3 KiB
JSON
{
|
|
"type": "component",
|
|
"meta": {
|
|
"docsUrl": "https://v2.quasar.dev/vue-components/splitter"
|
|
},
|
|
"props": {
|
|
"model-value": {
|
|
"desc": "Model of the component defining the size of first panel (or second if using reverse) in the unit specified (for '%' it's the split ratio percent - 0.0 < x < 100.0; for 'px' it's the size in px); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
|
|
"required": true,
|
|
"syncable": true,
|
|
"category": "model",
|
|
"type": "Number",
|
|
"examples": [
|
|
"v-model=\"ratio\""
|
|
]
|
|
},
|
|
"reverse": {
|
|
"type": "Boolean",
|
|
"desc": "Apply the model size to the second panel (by default it applies to the first)",
|
|
"category": "model"
|
|
},
|
|
"unit": {
|
|
"type": "String",
|
|
"desc": "CSS unit for the model",
|
|
"default": "%",
|
|
"values": [
|
|
"%",
|
|
"px"
|
|
],
|
|
"category": "model",
|
|
"required": false
|
|
},
|
|
"emit-immediately": {
|
|
"type": "Boolean",
|
|
"desc": "Emit model while user is panning on the separator",
|
|
"category": "model"
|
|
},
|
|
"horizontal": {
|
|
"type": "Boolean",
|
|
"desc": "Allows the splitter to split its two panels horizontally, instead of vertically",
|
|
"category": "content"
|
|
},
|
|
"limits": {
|
|
"type": "Array",
|
|
"desc": "An array of two values representing the minimum and maximum split size of the two panels; When 'px' unit is set then you can use Infinity as the second value to make it unbound on the other side",
|
|
"default": "For '%' unit: [10, 90]; For 'px' unit: [50, Infinity]",
|
|
"examples": [
|
|
":limits=\"[30, 70]\"",
|
|
":limits=\"[0, Infinity]\""
|
|
],
|
|
"category": "content|model",
|
|
"required": false
|
|
},
|
|
"disable": {
|
|
"type": "Boolean",
|
|
"desc": "Put component in disabled mode",
|
|
"category": "state"
|
|
},
|
|
"before-class": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueClassProp",
|
|
"desc": "Class definitions to be attributed to the 'before' panel",
|
|
"examples": [
|
|
"bg-deep-orange",
|
|
":before-class=\"{ 'my-special-class': <condition> }\""
|
|
],
|
|
"category": "style"
|
|
},
|
|
"after-class": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueClassProp",
|
|
"desc": "Class definitions to be attributed to the 'after' panel",
|
|
"examples": [
|
|
"bg-deep-orange",
|
|
":after-class=\"{ 'my-special-class': <condition> }\""
|
|
],
|
|
"category": "style"
|
|
},
|
|
"separator-class": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueClassProp",
|
|
"desc": "Class definitions to be attributed to the splitter separator",
|
|
"examples": [
|
|
"bg-deep-orange",
|
|
":separator-class=\"{ 'my-special-class': <condition> }\""
|
|
],
|
|
"category": "style"
|
|
},
|
|
"separator-style": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueStyleProp",
|
|
"desc": "Style definitions to be attributed to the splitter separator",
|
|
"examples": [
|
|
"background-color: #ff0000",
|
|
":separator-style=\"{ backgroundColor: '#ff0000' }\""
|
|
],
|
|
"category": "style"
|
|
},
|
|
"dark": {
|
|
"type": "Boolean",
|
|
"desc": "Applies a default lighter color on the separator; To be used when background is darker; Avoid using when you are overriding through separator-class or separator-style props",
|
|
"category": "style"
|
|
}
|
|
},
|
|
"slots": {
|
|
"default": {
|
|
"desc": "Default slot in the devland unslotted content of the component; Suggestion: QTooltip, QMenu"
|
|
},
|
|
"before": {
|
|
"desc": "Content of the panel on left/top"
|
|
},
|
|
"after": {
|
|
"desc": "Content of the panel on right/bottom"
|
|
},
|
|
"separator": {
|
|
"desc": "Content to be placed inside the separator; By default it is centered"
|
|
}
|
|
},
|
|
"events": {
|
|
"update:model-value": {
|
|
"desc": "Emitted when component's model value changes; Is also used by v-model",
|
|
"params": {
|
|
"value": {
|
|
"type": "Number",
|
|
"desc": "New model value (0.0 < x < 100.0) defining the ratio between panels"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |