quasar/dist/api/QColor.json

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

{
  "type": "component",
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/color-picker"
  },
  "props": {
    "name": {
      "type": "String",
      "desc": "Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL",
      "examples": [
        "car_id"
      ],
      "category": "behavior"
    },
    "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": [
        "String",
        "null",
        "undefined"
      ],
      "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",
      "required": false
    },
    "format-model": {
      "type": "String",
      "desc": "Forces a certain model format upon the model",
      "default": "auto",
      "values": [
        "auto",
        "hex",
        "rgb",
        "hexa",
        "rgba"
      ],
      "category": "model",
      "required": false
    },
    "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",
      "required": false
    },
    "square": {
      "type": "Boolean",
      "desc": "Removes border-radius so borders are squared",
      "category": "style"
    },
    "flat": {
      "type": "Boolean",
      "desc": "Applies a 'flat' design (no default shadow)",
      "category": "style"
    },
    "bordered": {
      "type": "Boolean",
      "desc": "Applies a default border to the component",
      "category": "style"
    },
    "no-header": {
      "type": "Boolean",
      "desc": "Do not render header",
      "category": "content"
    },
    "no-header-tabs": {
      "type": "Boolean",
      "desc": "Do not render header tabs (only the input)",
      "category": "content",
      "addedIn": "v2.2"
    },
    "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": {
      "type": "Boolean",
      "desc": "Put component in disabled mode",
      "category": "state"
    },
    "readonly": {
      "type": "Boolean",
      "desc": "Put component in readonly mode",
      "category": "state"
    },
    "dark": {
      "type": "Boolean",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    }
  },
  "events": {
    "update:model-value": {
      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
      "params": {
        "value": {
          "type": [
            "String",
            "null"
          ],
          "desc": "New model value",
          "required": true
        }
      }
    },
    "change": {
      "desc": "Emitted on lazy model value change (after user finishes selecting a color)",
      "params": {
        "value": {
          "type": "Any",
          "desc": "New model value",
          "required": true
        }
      }
    }
  }
}