quasar

{ "type": "component", "meta": { "docsUrl": "https://v2.quasar.dev/vue-components/button-dropdown" }, "props": { "transition-show": { "type": "String", "desc": "One of Quasar's embedded transitions", "examples": [ "fade", "slide-down" ], "category": "transition", "default": "fade", "required": false }, "transition-hide": { "type": "String", "desc": "One of Quasar's embedded transitions", "examples": [ "fade", "slide-down" ], "category": "transition", "default": "fade", "required": false }, "transition-duration": { "type": [ "String", "Number" ], "desc": "Transition duration (in milliseconds, without unit)", "default": 300, "category": "transition", "required": false }, "model-value": { "desc": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive", "required": false, "syncable": true, "category": "model", "type": "Boolean", "examples": [ "v-model=\"menuState\"" ] }, "size": { "type": "String", "desc": "Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)", "examples": [ "16px", "2rem", "xs", "md" ], "category": "style" }, "type": { "type": "String", "desc": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag", "default": "button", "examples": [ "a", "submit", "button", "reset", "image/png", "href=\"https://quasar.dev\" target=\"_blank\"" ], "category": "general", "required": false }, "to": { "type": [ "String", "Object" ], "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used", "examples": [ "/home/dashboard", ":to=\"{ name: 'my-route-name' }\"" ], "category": "navigation" }, "replace": { "type": "Boolean", "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used", "category": "navigation" }, "href": { "type": "String", "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props", "examples": [ "https://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ], "category": "navigation", "addedIn": "v2.4" }, "target": { "type": "String", "desc": "Native <a> link target attribute; Use it only with 'to' or 'href' props", "examples": [ "_blank", "_self", "_parent", "_top" ], "category": "navigation", "addedIn": "v2.4" }, "label": { "type": [ "String", "Number" ], "desc": "The text that will be shown on the button", "examples": [ "Button Label" ], "category": "content" }, "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" }, "icon-right": { "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" }, "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" }, "square": { "type": "Boolean", "desc": "Removes border-radius so borders are squared", "category": "style", "addedIn": "v2.7.6" }, "glossy": { "type": "Boolean", "desc": "Applies a glossy effect", "category": "style" }, "fab": { "type": "Boolean", "desc": "Makes button size and shape to fit a Floating Action Button", "category": "style" }, "fab-mini": { "type": "Boolean", "desc": "Makes button size and shape to fit a small Floating Action Button", "category": "style" }, "padding": { "type": "String", "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set", "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ], "category": "style" }, "color": { "type": "String", "desc": "Color name for component from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "category": "style" }, "text-color": { "type": "String", "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette", "examples": [ "primary", "teal-10" ], "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": { "type": "Boolean", "desc": "Dense mode; occupies less space", "category": "style" }, "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", "required": false }, "tabindex": { "type": [ "Number", "String" ], "desc": "Tabindex HTML attribute value", "examples": [ "0", "100" ], "category": "general" }, "align": { "type": "String", "desc": "Label or content alignment", "default": "center", "values": [ "left", "right", "center", "around", "between", "evenly" ], "category": "content", "required": false }, "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" }, "loading": { "type": "Boolean", "desc": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)", "category": "behavior|state" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" }, "split": { "type": "Boolean", "desc": "Split dropdown icon into its own button", "category": "content|behavior" }, "dropdown-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" }, "disable-main-btn": { "type": "Boolean", "desc": "Disable main button (useful along with 'split' prop)", "category": "behavior" }, "disable-dropdown": { "type": "Boolean", "desc": "Disables dropdown (dropdown button if using along 'split' prop)", "category": "behavior" }, "no-icon-animation": { "type": "Boolean", "desc": "Disables the rotation of the dropdown icon when state is toggled", "category": "style" }, "content-style": { "type": [ "String", "Array", "Object" ], "tsType": "VueStyleProp", "desc": "Style definitions to be attributed to the menu", "examples": [ "background-color: #ff0000", ":content-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "content-class": { "type": [ "String", "Array", "Object" ], "tsType": "VueClassProp", "desc": "Class definitions to be attributed to the menu", "examples": [ "my-special-class", ":content-class=\"{ 'my-special-class': <condition> }\"" ], "category": "style" }, "cover": { "type": "Boolean", "desc": "Allows the menu to cover the button. When used, the 'menu-self' and 'menu-fit' props are no longer effective", "category": "position" }, "persistent": { "type": "Boolean", "desc": "Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key", "category": "behavior" }, "no-route-dismiss": { "type": "Boolean", "desc": "Changing route app won't dismiss the popup; No need to set it if 'persistent' prop is also set", "category": "behavior" }, "auto-close": { "type": "Boolean", "desc": "Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap", "category": "behavior" }, "menu-anchor": { "type": "String", "desc": "Two values setting the starting position or anchor point of the menu relative to its target", "values": [ "top left", "top middle", "top right", "top start", "top end", "center left", "center middle", "center right", "center start", "center end", "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end" ], "default": "bottom end", "category": "position", "required": false }, "menu-self": { "type": "String", "desc": "Two values setting the menu's own position relative to its target", "values": [ "top left", "top middle", "top right", "top start", "top end", "center left", "center middle", "center right", "center start", "center end", "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end" ], "default": "top end", "category": "position", "required": false }, "menu-offset": { "type": "Array", "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels", "examples": [ "[8, 8]", "[5, 10]" ], "category": "position" }, "toggle-aria-label": { "type": "String", "desc": "aria-label to be used on the dropdown toggle element", "examples": [ "Open menu" ], "category": "accessibility", "addedIn": "v2.8.4" } }, "slots": { "default": { "desc": "Default slot in the devland unslotted content of the component" }, "label": { "desc": "Customize main button's content through this slot, unless you're using the 'icon' and 'label' props" }, "loading": { "desc": "Override the default QSpinner when in 'loading' state", "addedIn": "v2.8" } }, "events": { "update:model-value": { "desc": "Emitted when showing/hidden state changes; Is also used by v-model", "params": { "value": { "type": "Boolean", "desc": "New state (showing/hidden)" } } }, "show": { "desc": "Emitted after component has triggered show()", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": true } } }, "before-show": { "desc": "Emitted when component triggers show() but before it finishes doing it", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": true } } }, "hide": { "desc": "Emitted after component has triggered hide()", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": true } } }, "before-hide": { "desc": "Emitted when component triggers hide() but before it finishes doing it", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": true } } }, "click": { "desc": "Emitted when user clicks/taps on the main button (not the icon one, if using 'split')", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": true } } } }, "methods": { "show": { "desc": "Triggers component to show", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": false } } }, "hide": { "desc": "Triggers component to hide", "params": { "evt": { "type": "Event", "desc": "JS event object", "required": false } } }, "toggle": { "params": { "evt": { "type": "Event", "desc": "JS event object", "required": false } }, "desc": "Triggers component to toggle between show/hide" } } }