Skip to content
On this page

Dropdown Subitem

Sub-component of Dropdown for nesting dropdown item.

Usage

Simple Usage

preview
vue
<template>
  <p-dropdown text="Fruit">
    <p-dropdown-subitem text="Fruit A">
      <p-dropdown-item>Apple</p-dropdown-item>
      <p-dropdown-item>Avocado</p-dropdown-item>
    </p-dropdown-subitem>
    <p-dropdown-subitem text="Fruit B">
      <p-dropdown-item>Banana</p-dropdown-item>
      <p-dropdown-item>Blueberry</p-dropdown-item>
    </p-dropdown-subitem>
  </p-dropdown>
</template>

Multi Level Subitem

preview
vue
<template>
  <p-dropdown text="Multi Level">
    <p-dropdown-subitem text="Level A">
      <p-dropdown-item>Item A-1</p-dropdown-item>
      <p-dropdown-item>Item A-2</p-dropdown-item>
      <p-dropdown-subitem text="Level AA">
        <p-dropdown-item>Item AA-1</p-dropdown-item>
        <p-dropdown-item>Item AA-2</p-dropdown-item>
      </p-dropdown-subitem>
    </p-dropdown-subitem>
  </p-dropdown>
</template>

Custom Button Content

Similar to Dropdown, You can change button content via slot button-content

preview
vue
<template>
  <p-dropdown text="Custom Content">
    <p-dropdown-subitem>
      <template #button-content>
        <Persona class="inline-block" /> Fruit A
      </template>
      <p-dropdown-item>Apple</p-dropdown-item>
      <p-dropdown-item>Avocado</p-dropdown-item>
    </p-dropdown-subitem>
    <p-dropdown-subitem text="Fruit B">
      <p-dropdown-item>Banana</p-dropdown-item>
      <p-dropdown-item>Blueberry</p-dropdown-item>
    </p-dropdown-subitem>
  </p-dropdown>
</template>

Hide Caret

Similar with Dropdown, you can hide caret icon with no-caret props.

preview
vue
<template>
  <p-dropdown text="Fruit">
    <p-dropdown-subitem text="with Caret">
      <p-dropdown-item>Apple</p-dropdown-item>
      <p-dropdown-item>Avocado</p-dropdown-item>
    </p-dropdown-subitem>
    <p-dropdown-subitem text="without Caret" no-caret>
      <p-dropdown-item>Banana</p-dropdown-item>
      <p-dropdown-item>Blueberry</p-dropdown-item>
    </p-dropdown-subitem>
  </p-dropdown>
</template>

API

Props

PropsTypeDefaultDescription
textString-Text content
no-caretBooleanfalseHide caret icon

Slots

NameDescription
defaultContent to place in button

Events

NameArgumentsDescription
clickNative DOM Event objectEvent when button is clicked

See Also

Released under the MIT License.