quasar/src/components/color/QColor.json

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

{
  "props": {
    "value": {
      "extends": "value",
      "type": "String",
      "examples": [ "v-model=\"myColor\"" ]
    },

    "default-value": {
      "type": "String",
      "desc": "The default value to show when the model doesn't have one",
      "examples": [ "default-value=\"#c0c0c0\"" ],
      "category": "model"
    },

    "default-view": {
      "type": "String",
      "desc": "The default view of the picker",
      "default": "spectrum",
      "values": [ "spectrum", "tune", "palette" ],
      "category": "behavior"
    },

    "format-model": {
      "type": "String",
      "desc": "Forces a certain model format upon the model",
      "default": "auto",
      "values": [ "auto", "hex", "rgb", "hexa", "rgba" ],
      "examples": [ "hex" ],
      "category": "model"
    },

    "palette": {
      "type": "Array",
      "desc": "Use a custom palette of colors for the palette tab",
      "default": "(hard-coded palette)",
      "examples": [
        ":palette=\"[ '#019A9D', '#D9B801', 'rgb(23,120,0)', '#B2028A' ]\""
      ],
      "category": "content"
    },

    "no-header": {
      "type": "Boolean",
      "desc": "Do not render header",
      "category": "content"
    },

    "no-footer": {
      "type": "Boolean",
      "desc": "Do not render footer; Useful when you want a specific view ('default-view' prop) and don't want the user to be able to switch it",
      "category": "content"
    },

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

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

    "dark": {
      "extends": "dark"
    }
  },

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

    "change": {
      "extends": "input",
      "desc": "Emitted on lazy model value change (after user finishes selecting a color)"
    }
  }
}