quasar/src/components/btn-toggle/QBtnToggle.json

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

{
  "mixins": [ "mixins/ripple" ],

  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/button-toggle"
  },

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

  "props": {
    "value": {
      "type": "Any",
      "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive",
      "examples": [ "v-model=\"selected\"" ],
      "category": "model"
    },

    "options": {
      "type": "Array",
      "desc": "Array of Objects defining each option",
      "required": true,
      "definition": {
        "label": {
          "type": "String",
          "desc": "Label of option button; Use this prop and/or 'icon', but at least one is required",
          "examples": [ "Option 1" ]
        },
        "icon": {
          "extends": "icon",
          "desc": "Icon of option button; Use this prop and/or 'label', but at least one is required"
        },
        "value": {
          "type": "Any",
          "desc": "Value of the option that will be used by component model",
          "required": true,
          "__exemption": [ "examples" ]
        },
        "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",
          "__exemption": [ "examples" ]
        }
      },
      "examples": [
        "[ {label: 'One', value: 'one'}, {label: 'Two', value: 'two'} ]"
      ],
      "category": "model"
    },

    "color": {
      "extends": "color"
    },

    "text-color": {
      "extends": "text-color"
    },

    "toggle-color": {
      "extends": "color",
      "default": "primary"
    },

    "toggle-text-color": {
      "extends": "text-color"
    },

    "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"
    },

    "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"
    },

    "dense": {
      "extends": "dense"
    },

    "readonly": {
      "extends": "readonly"
    },

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

    "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",
      "addedIn": "v1.4.4"
    }
  },

  "events": {
    "input": {
      "extends": "input"
    },

    "clear": {
      "desc": "When using the 'clearable' property, this event is emitted when the already selected button is clicked",
      "addedIn": "v1.4.4"
    }
  }
}