quasar/src/components/splitter/QSplitter.json

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

{
  "behavior": {
    "$listeners": true
  },

  "props": {
    "value": {
      "type": "Number",
      "desc": "Model of the component defining the split ratio percent (0.0 < x < 100.0) between panes; Either use this property (along with a listener for 'input' event) OR use v-model directive",
      "examples": [ "v-model=\"ratio\"" ],
      "category": "model"
    },

    "horizontal": {
      "type": "Boolean",
      "desc": "Allows the splitter to split its two panes horizontally, instead of vertically",
      "category": "content"
    },

    "limits": {
      "type": "Array",
      "desc": "An array of two values representing a ratio of minimum and maximum split area of the two panes (0.0 < x < 100.0)",
      "default": "[10, 90]",
      "examples": [ ":limits=\"[30, 70]\"" ],
      "category": "content|model"
    },

    "disable": {
      "extends": "disable"
    },

    "before-class": {
      "type": [ "Array", "String", "Object" ],
      "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": [ "Array", "String", "Object" ],
      "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": [ "Array", "String", "Object" ],
      "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": [ "Array", "String", "Object" ],
      "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 pane on left/top"
    },

    "after": {
      "desc": "Content of the pane on right/bottom"
    },

    "separator": {
      "desc": "Content to be placed inside the separator; By default it is centered"
    }
  },

  "events": {
    "input": {
      "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 panes",
          "examples": [ 0.22 ]
        }
      }
    }
  }
}