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