Dropdown

Toggleable menu for displaying lists of links and actions.

Basic usage

Basic usage of the drop-down menu.

Position

Support to specify 6 pop-up orientations through position, which are: top: up, tl: top left, tr: top right, bottom: bottom (default), bl: bottom left, br: bottom right.

<template>
  <tu-dropdown position="bl">
    <tu-button>Bottom left</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="bottom">
    <tu-button>Bottom</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="br">
    <tu-button>Bottom right</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="tl">
    <tu-button>Top left</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="top">
    <tu-button>Top</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="tr">
    <tu-button>Top Right</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
</template>

<template>
  <tu-dropdown position="bl">
    <tu-button>Bottom left</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="bottom">
    <tu-button>Bottom</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="br">
    <tu-button>Bottom right</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="tl">
    <tu-button>Top left</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="top">
    <tu-button>Top</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown position="tr">
    <tu-button>Top Right</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
</template>

Trigger

Specify the trigger method by trigger.

The <tu-dropdown-button> component can be used to display a button with a menu of additional related functions on the right.

Group

Use the grouping option through the <tu-dropdown-group> component.

Submenu

Drop-down box with multi-level menu.

<template>
  <tu-dropdown>
    <tu-button>Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-submenu value="option-1">
        <template #default>Option 2</template>
        <template #content>
          <tu-dropdown-item>Option 2-1</tu-dropdown-item>
          <tu-dropdown-submenu value="option-2-2" trigger="hover">
            <template #default>Option 2-2</template>
            <template #content>
              <tu-dropdown-item>Option 2-1</tu-dropdown-item>
              <tu-dropdown-item>Option 2-2</tu-dropdown-item>
              <tu-dropdown-item>Option 2-3</tu-dropdown-item>
            </template>
            <template #footer>
              <div style="padding: 6px; text-align: center">
                <tu-button>confrim</tu-button>
              </div>
            </template>
          </tu-dropdown-submenu>
          <tu-dropdown-item>Option 2-3</tu-dropdown-item>
        </template>
      </tu-dropdown-submenu>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
</template>

<template>
  <tu-dropdown>
    <tu-button>Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-submenu value="option-1">
        <template #default>Option 2</template>
        <template #content>
          <tu-dropdown-item>Option 2-1</tu-dropdown-item>
          <tu-dropdown-submenu value="option-2-2" trigger="hover">
            <template #default>Option 2-2</template>
            <template #content>
              <tu-dropdown-item>Option 2-1</tu-dropdown-item>
              <tu-dropdown-item>Option 2-2</tu-dropdown-item>
              <tu-dropdown-item>Option 2-3</tu-dropdown-item>
            </template>
            <template #footer>
              <div style="padding: 6px; text-align: center">
                <tu-button>confrim</tu-button>
              </div>
            </template>
          </tu-dropdown-submenu>
          <tu-dropdown-item>Option 2-3</tu-dropdown-item>
        </template>
      </tu-dropdown-submenu>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
</template>

After moving into the area, you can click the right mouse button to trigger.

Max heigth

Support to specify the max height of pop-up box through popupMaxHeight, default is true. The pop-up box has a default height and displays scrollbar. Setting popupMaxHeight to false will display all menu options in their entirety

Sizes

Besides default size, tu-dropdown component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

<template>
  <tu-dropdown size="mini">
    <tu-button size="mini">Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown size="small">
    <tu-button size="small">Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown>
    <tu-button>Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown size="large">
    <tu-button size="large">Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
</template>

<template>
  <tu-dropdown size="mini">
    <tu-button size="mini">Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown size="small">
    <tu-button size="small">Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown>
    <tu-button>Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
  <tu-dropdown size="large">
    <tu-button size="large">Dropdown list</tu-button>
    <template #content>
      <tu-dropdown-item>Option 1</tu-dropdown-item>
      <tu-dropdown-item disabled>Option 2</tu-dropdown-item>
      <tu-dropdown-item>Option 3</tu-dropdown-item>
    </template>
  </tu-dropdown>
</template>

Name	Description	Type	Default
popup-visible(v-model)	Whether the popup is visible	`Boolean`	-
default-popup-visible	Whether the popup is visible by default (uncontrolled mode)	`Boolean`	false
trigger	Trigger method	`String`	click
position	Popup position	`String`	bottom
popup-container	Mount container for popup	`String` `HTMLElement`	-
hide-on-select	Whether to hide popup when the user selects	`Boolean`	true
size	Size of dropdown	`String`	medium

Name	Description	Type
popup-visible-change	Triggered when the display status of the drop-down box changes	`Function`
select	Triggered when the user selects	`Function`

Name	Description
content	Content
footer	Footer

Name	Description	Type	Default
value	Value	`String` `Number` `Object`	-
disabled	Disabled	`Boolean`	false

Name	Description	Type
click	Emitted when the button is clicked	`Function`

Name	Description
icon	Icon

Name	Description	Type	Default
title	Group title	`String`	-

Name	Description
title	Group title

Name	Description	Type	Default
value	Value	`String` `Number`	-
disabled	Whether to disable	`Boolean`	false
trigger	Trigger method	`String`	`'click'`
position	Popup position	`String`	`'rt'`
popup-visible(v-model)	Whether the popup is visible	`Boolean`	-
default-popup-visible	Whether the popup is visible by default (uncontrolled mode)	`Boolean`	false
option-props	Custom option properties	`Object`	-

Name	Description	Type
popup-visible-change	Triggered when the display status of the drop-down box changes	`Function`

Name	Description
icon	Icon
content	Submenu content
footer	Footer

Name	Description	Type	Default
popup-visible(v-model)	Whether the popup is visible	`Boolean`	-
default-popup-visible	Whether the popup is visible by default (uncontrolled mode)	`Boolean`	false
trigger	Trigger method	`String`	click
position	Popup position	`String`	bottom
popup-container	Mount container for popup	`String` `HTMLElement`	-
disabled	Whether to disable	`Boolean`	false
type	Type of Dropdown button	`String`	-
size	Size of Dropdown button	`String`	medium
button-props	Button props	`ButtonProps`	-
hide-on-select	Whether to hide popup when the user selects	`Boolean`	true

Name	Description	Type
popup-visible-change	Triggered when the display status of the drop-down box changes	`Function`
select	Triggered when the user selects	`Function`
click	Emitted when the button is clicked	`Function`

Name	Description
icon	Button icon
content	Content

Dropdown ​

Basic usage ​

Position ​

Trigger ​

Dropdown button ​

Group ​

Submenu ​

Context Menu ​

Max heigth ​

Sizes ​

Dropdown API ​

Dropdown Attributes ​

Dropdown Events ​

Dropdown Slots ​

Dropdown-Item Attributes ​

Dropdown-Item Events ​

Dropdown-Item Slots ​

Dropdown-Group Attributes ​

Dropdown-Group Slots ​

Dropdown-Submenu Attributes ​

Dropdown-Submenu Events ​

Dropdown-Submenu Slots ​

Dropdown-Button Attributes ​

Dropdown-Button Events ​

Dropdown-Button Slots ​

Basic usage

Position

Trigger

Dropdown button

Group

Submenu

Context Menu

Max heigth

Sizes

Dropdown API

Dropdown Attributes

Dropdown Events

Dropdown Slots

Dropdown-Item Attributes

Dropdown-Item Events

Dropdown-Item Slots

Dropdown-Group Attributes

Dropdown-Group Slots

Dropdown-Submenu Attributes

Dropdown-Submenu Events

Dropdown-Submenu Slots

Dropdown-Button Attributes

Dropdown-Button Events

Dropdown-Button Slots