quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/vue-components/expansion-item" }, "props": { "to": { "type": [ "String", "Object" ], "desc": "Equivalent to Vue Router <router-link> 'to' property", "examples": [ "/home/dashboard", ":to=\"{ name: 'my-route-name' }\"" ], "category": "behavior" }, "exact": { "type": "Boolean", "desc": "Equivalent to Vue Router <router-link> 'exact' property", "category": "behavior" }, "append": { "type": "Boolean", "desc": "Equivalent to Vue Router <router-link> 'append' property", "category": "behavior" }, "replace": { "type": "Boolean", "desc": "Equivalent to Vue Router <router-link> 'replace' property", "category": "behavior" }, "active-class": { "type": "String", "desc": "Equivalent to Vue Router <router-link> 'active-class' property", "examples": [ "my-active-class" ], "category": "behavior" }, "exact-active-class": { "type": "String", "desc": "Equivalent to Vue Router <router-link> 'active-class' property", "examples": [ "my-exact-active-class" ], "category": "behavior" }, "disable": { "type": "Boolean", "desc": "Put component in disabled mode", "category": "state" }, "value": { "type": "Boolean", "desc": "Model of the component defining 'open' state; Either use this property (along with a listener for 'input' event) OR use v-model directive", "category": "model" }, "icon": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content" }, "expand-icon": { "type": "String", "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content" }, "expanded-icon": { "type": "String", "desc": "Expand icon name (following Quasar convention) for when QExpansionItem is expanded; When used, it also disables the rotation animation of the expand icon; Make sure you have the icon library installed unless you are using 'img:' prefix", "examples": [ "map", "ion-add", "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg", "img:statics/path/to/some_image.png" ], "category": "content", "addedIn": "v1.4.5" }, "expand-icon-class": { "type": [ "Array", "String", "Object" ], "desc": "Apply custom class(es) to the expand icon item section", "examples": [ "text-purple" ], "category": "style" }, "label": { "type": "String", "desc": "Header label (unless using 'header' slot)", "examples": [ "My expansion item" ], "category": "content" }, "label-lines": { "type": [ "Number", "String" ], "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!", "examples": [ "1", "3", ":label-lines=\"2\"" ], "category": "content" }, "caption": { "type": "String", "desc": "Header sub-label (unless using 'header' slot)", "examples": [ "Unread message: 5" ], "category": "content" }, "caption-lines": { "type": [ "Number", "String" ], "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property!", "examples": [ "1", "3", ":caption-lines=\"2\"" ], "category": "content" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style" }, "dense": { "type": "Boolean", "desc": "Dense mode; occupies less space", "category": "style" }, "duration": { "type": "Number", "desc": "Animation duration (in milliseconds)", "default": 300, "examples": [ ":duration=\"1000\"" ], "category": "behavior" }, "header-inset-level": { "type": "Number", "desc": "Apply an inset to header (unless using 'header' slot); Useful when header avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu", "examples": [ ":header-inset-level=\"1\"" ], "category": "content" }, "content-inset-level": { "type": "Number", "desc": "Apply an inset to content (changes content padding)", "examples": [ ":content-inset-level=\"1\"" ], "category": "content" }, "expand-separator": { "type": "Boolean", "desc": "Apply a top and bottom separator when expansion item is opened", "category": "content" }, "default-opened": { "type": "Boolean", "desc": "Puts expansion item into open state on initial render; Overridden by v-model if used", "category": "behavior" }, "expand-icon-toggle": { "type": "Boolean", "desc": "Applies the expansion events to the expand icon only and not to the whole header", "category": "behavior" }, "switch-toggle-side": { "type": "Boolean", "desc": "Switch expand icon side (from default 'right' to 'left')", "category": "content" }, "dense-toggle": { "type": "Boolean", "desc": "Use dense mode for expand icon", "category": "style" }, "group": { "type": "String", "desc": "Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. 'accordion mode'", "examples": [ "my-emails" ], "category": "content|behavior" }, "popup": { "type": "Boolean", "desc": "Put expansion list into 'popup' mode", "category": "behavior" }, "header-style": { "type": [ "Array", "String", "Object" ], "desc": "Apply custom style to the header", "examples": [ "background: '#ff0000'", ":header-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "header-class": { "type": [ "Array", "String", "Object" ], "desc": "Apply custom class(es) to the header", "examples": [ "my-custom-class", ":header-class=\"{ 'my-custom-class': someCondition }\"" ], "category": "style" } }, "slots": { "default": { "desc": "Slot used for expansion item's content" }, "header": { "desc": "Slot used for overriding default header" } }, "events": { "input": { "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": "Object", "desc": "JS event object", "required": true } } }, "before-show": { "desc": "Emitted when component triggers show() but before it finishes doing it", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "hide": { "desc": "Emitted after component has triggered hide()", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "before-hide": { "desc": "Emitted when component triggers hide() but before it finishes doing it", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "after-show": { "desc": "Emitted when component show animation is finished", "addedIn": "v1.9.0" }, "after-hide": { "desc": "Emitted when component hide animation is finished", "addedIn": "v1.9.0" } }, "methods": { "show": { "desc": "Triggers component to show", "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } } }, "hide": { "desc": "Triggers component to hide", "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } } }, "toggle": { "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } }, "desc": "Triggers component to toggle between show/hide" } } }