Collapse actions or menus into a Dropdown Menu.

Basic Usage

Move to the Dropdown Menu to expand more actions.

<fx-dropdown>
  <span class="el-dropdown-link">
    Dropdown Menu<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item disabled>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item divided>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

Trigger Element

A button can be used to trigger the Dropdown Menu.

<fx-dropdown>
  <fx-button type="primary">
    More Menu<i class="el-icon-arrow-down el-icon--right"></i>
  </fx-button>
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>
<fx-dropdown split-button type="primary" @click="handleClick">
  More Menu
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<style>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
  export default {
    methods: {
      handleClick() {
        alert("button click");
      }
    }
  };
</script>

Trigger mode

You can configure click activation or hover activation.

<fx-row class="block-col-2">
  <fx-col :span="12">
    <span class="demonstration">hover Active</span>
    <fx-dropdown>
      <span class="el-dropdown-link">
        Dropdown Menu<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <fx-dropdown-menu slot="dropdown">
        <fx-dropdown-item icon="el-icon-plus">Golden cake</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus">Lion head meatball</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus-outline"
          >Luosifen</fx-dropdown-item
        >
        <fx-dropdown-item icon="el-icon-check">Double-skin milk</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-check">Oyster omelet</fx-dropdown-item>
      </fx-dropdown-menu>
    </fx-dropdown>
  </fx-col>
  <fx-col :span="12">
    <span class="demonstration">click Active</span>
    <fx-dropdown trigger="click">
      <span class="el-dropdown-link">
        Dropdown Menu<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <fx-dropdown-menu slot="dropdown">
        <fx-dropdown-item icon="el-icon-plus">Golden cake</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus">Lion head meatball</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus-outline"
          >Luosifen</fx-dropdown-item
        >
        <fx-dropdown-item icon="el-icon-check">Double-skin milk</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-check">Oyster omelet</fx-dropdown-item>
      </fx-dropdown-menu>
    </fx-dropdown>
  </fx-col>
</fx-row>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

Menu Hide Mode

Configure it with the hide-on-click property.

<fx-dropdown :hide-on-click="false">
  <span class="el-dropdown-link">
    Dropdown Menu<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item disabled>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item divided>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

Command Event

An event is triggered after a menu item is clicked. Users can perform different actions based on the corresponding menu item key.

<fx-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Dropdown Menu<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item command="a">Golden cake</fx-dropdown-item>
    <fx-dropdown-item command="b">Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item command="c">Luosifen</fx-dropdown-item>
    <fx-dropdown-item command="d" disabled>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item command="e" divided>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message("click on item " + command);
      }
    }
  };
</script>

Different Sizes

The Dropdown component provides three sizes in addition to the default, so you can choose the appropriate size for different scenarios.

<fx-dropdown split-button type="primary">
  DefaultSize
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<fx-dropdown size="medium" split-button type="primary">
  Medium Size
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<fx-dropdown size="small" split-button type="primary">
  Small Size
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

<fx-dropdown size="mini" split-button type="primary">
  Mini Size
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Golden cake</fx-dropdown-item>
    <fx-dropdown-item>Lion head meatball</fx-dropdown-item>
    <fx-dropdown-item>Luosifen</fx-dropdown-item>
    <fx-dropdown-item>Double-skin milk</fx-dropdown-item>
    <fx-dropdown-item>Oyster omelet</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

Dropdown Attributes

Parameter	Description	Type	Optional Values	Default
type	Menu button type, same as Button component (only enabled when split-button is true)	string	-	-
size	Menu size; also applies to the trigger button when split-button is true	string	medium / small / mini	-
split-button	Dropdown trigger element appears as a button group	boolean	-	false
placement	Menu popup placement	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom-end
trigger	Behavior that triggers the dropdown	string	hover, click	hover
hide-on-click	Whether to hide the menu after clicking a menu item	boolean	-	true
show-timeout	Delay before showing the Dropdown Menu (only enabled when trigger is hover)	number	-	250
hide-timeout	Delay before hiding the Dropdown Menu (only enabled when trigger is hover)	number	-	150
tabindex	tabindex of the Dropdown component	number	-	0
disabled	Disabled	boolean	-	-

Dropdown Slots

Name	Description
-	Element that triggers the dropdown list display. Note: it must be an element or component
dropdown	Dropdown list, usually an <fx-dropdown-menu> component

Dropdown Events

Event Name	Description	Callback Parameters
click	Callback when clicking the left button when split-button is true	-
command	Event callback triggered when clicking a menu item	Command of dropdown-item
visible-change	Triggered when the dropdown appears or hides	true when it appears, false when it hides

Dropdown Menu Item Attributes

Parameter	Description	Type	Optional Values	Default
command	Command	string/number/object	-	-
disabled	Disabled	boolean	-	false
divided	Shows a divider	boolean	-	false
icon	Icon class name	string	-	-