quasar/src/api.extends.json

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

{
  "props": {
    "readonly": {
      "type": "Boolean",
      "desc": "Put component in readonly mode",
      "category": "state"
    },

    "disable": {
      "type": "Boolean",
      "desc": "Put component in disabled mode",
      "category": "state"
    },

    "color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [ "'primary'", "'teal'", "'teal-10'" ],
      "category": "style"
    },

    "text-color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
      "examples": [ "'primary'", "'teal'", "'teal-10'" ],
      "category": "style"
    },

    "dense": {
      "type": "Boolean",
      "desc": "Dense mode; occupies less space",
      "category": "style"
    },

    "size": {
      "type": "String",
      "desc": "Size in CSS units, including unit name",
      "examples": [ "'16px'", "'2rem'" ],
      "category": "style"
    },

    "dark": {
      "type": [ "Boolean", "null" ],
      "default": "null",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    },

    "icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
      "examples": [
        "'map'",
        "'ion-add'",
        "'img:https://cdn.quasar.dev/logo-v2/svg/logo.svg'",
        "'img:path/to/some_image.png'"
      ],
      "category": "content"
    },

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

    "square": {
      "type": "Boolean",
      "desc": "Removes border-radius so borders are squared",
      "category": "style"
    },

    "rounded": {
      "type": "Boolean",
      "desc": "Applies a small standard border-radius for a squared shape of the component",
      "category": "style"
    },

    "tabindex": {
      "type": [ "Number", "String" ],
      "desc": "Tabindex HTML attribute value",
      "examples": [ "100", "'0'" ],
      "category": "general"
    },

    "transition": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions",
      "examples": [ "'fade'", "'slide-down'" ],
      "category": "transition"
    },

    "animation-speed": {
      "type": [ "String", "Number" ],
      "desc": "Animation speed (in milliseconds, without unit)",
      "examples": [ "500", "'1200'" ],
      "category": "style"
    },

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

    "html": {
      "type": "Boolean",
      "desc": "Force use of textContent instead of innerHTML to render text; Use it when the text might be unsafe (from user input)",
      "category": "behavior"
    },

    "tag": {
      "type": "String",
      "desc": "HTML tag to use",
      "category": "content"
    },

    "scroll-target": {
      "type": [ "Element", "String" ],
      "desc": "CSS selector or DOM element to be used as a custom scroll container instead of the auto detected one",
      "examples": [
        ".scroll-target-class",
        "#scroll-target-id",
        "$refs.scrollTarget",
        "document.body"
      ],
      "category": "behavior"
    },

    "ripple": {
      "type": [ "Boolean", "Object" ],
      "desc": "Configure material ripple (disable it by setting it to 'false' or supply a config object)",
      "default": "true",
      "examples": [ "false", "{ early: true, center: true, color: 'teal', keyCodes: [] }" ],
      "category": "style"
    },

    "evt": {
      "type": "Event",
      "desc": "JS event object"
    }
  },

  "slots": {
    "default": {
      "desc": "Default slot in the devland unslotted content of the component"
    }
  },

  "events": {
    "update:model-value": {
      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
      "params": {
        "value": {
          "type": "Any",
          "desc": "New model value",
          "required": true
        }
      }
    },

    "show": {
      "desc": "Emitted after component has triggered show()",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "before-show": {
      "desc": "Emitted when component triggers show() but before it finishes doing it",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "after-show": {
      "desc": "Emitted when component show animation is finished"
    },

    "hide": {
      "desc": "Emitted after component has triggered hide()",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "before-hide": {
      "desc": "Emitted when component triggers hide() but before it finishes doing it",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    },

    "after-hide": {
      "desc": "Emitted when component hide animation is finished"
    },

    "click": {
      "desc": "Emitted when user clicks/taps on the component",
      "params": {
        "evt": {
          "extends": "evt",
          "required": true
        }
      }
    }
  },

  "methods": {
    "show": {
      "desc": "Triggers component to show",
      "params": {
        "evt": {
          "extends": "evt",
          "required": false
        }
      },
      "returns": null
    },

    "hide": {
      "desc": "Triggers component to hide",
      "params": {
        "evt": {
          "extends": "evt",
          "required": false
        }
      },
      "returns": null
    },

    "toggle": {
      "desc": "Triggers component to toggle between show/hide",
      "params": {
        "evt": {
          "extends": "evt",
          "required": false
        }
      },
      "returns": null
    }
  }
}