Fxiaoke Developer Manual
Table of Contents

Dropdown

# FxDropdown

Collapse actions or menus into a dropdown list.

# Basic Usage

Hover over the dropdown to reveal more actions.

Dropdown Menu Option 1 Option 2 Option 3 Option 4 Option 5

Use the component slot to set the trigger element and the named slot="dropdown" to configure the dropdown menu. By default, the dropdown appears on hover without requiring a click.

<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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item disabled>Option 4</fx-dropdown-item>
    <fx-dropdown-item divided>Option 5</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

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

# Trigger Object

Button can be used to trigger dropdown menu.

More Menu Option 1 Option 2 Option 3 Option 4 Option 5 More Menu Option 1 Option 2 Option 3 Option 4 Option 5

Set the split-button property to true to display the trigger as a button group, with the main function button on the left and the dropdown trigger button on the right.

<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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item>Option 4</fx-dropdown-item>
    <fx-dropdown-item>Option 5</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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item>Option 4</fx-dropdown-item>
    <fx-dropdown-item>Option 5</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>
Expand Copy

# Trigger Method

Configure click or hover activation.

hover to activate Dropdown Menu Option 1 Option 2 Option 3 Option 4 Option 5 click to activate Dropdown Menu Option 1 Option 2 Option 3 Option 4 Option 5

Set the trigger property to "click" for click activation.

<fx-row class="block-col-2">
  <fx-col :span="12">
    <span class="demonstration">hover to activate</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">Option 1</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus">Option 2</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus-outline"
          >Option 3</fx-dropdown-item
        >
        <fx-dropdown-item icon="el-icon-check">Option 4</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-check">Option 5</fx-dropdown-item>
      </fx-dropdown-menu>
    </fx-dropdown>
  </fx-col>
  <fx-col :span="12">
    <span class="demonstration">click to activate</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">Option 1</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus">Option 2</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-plus-outline"
          >Option 3</fx-dropdown-item
        >
        <fx-dropdown-item icon="el-icon-check">Option 4</fx-dropdown-item>
        <fx-dropdown-item icon="el-icon-circle-check">Option 5</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>
Expand Copy

Configure using the hide-on-click property.

Dropdown Menu Option 1 Option 2 Option 3 Option 4 Option 5

By default, the dropdown menu hides after clicking a menu item. Set hide-on-click to false to disable this behavior.

<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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item disabled>Option 4</fx-dropdown-item>
    <fx-dropdown-item divided>Option 5</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>

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

# Command Events

Clicking menu items triggers events that can be handled based on the item's key.

Dropdown Menu Option 1 Option 2 Option 3 Option 4 Option 5
<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">Option 1</fx-dropdown-item>
    <fx-dropdown-item command="b">Option 2</fx-dropdown-item>
    <fx-dropdown-item command="c">Option 3</fx-dropdown-item>
    <fx-dropdown-item command="d" disabled>Option 4</fx-dropdown-item>
    <fx-dropdown-item command="e" divided>Option 5</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>
Expand Copy

# Different Sizes

Dropdown provides three additional sizes besides the default.

Default Size Option 1 Option 2 Option 3 Option 4 Option 5 Medium Size Option 1 Option 2 Option 3 Option 4 Option 5 Small Size Option 1 Option 2 Option 3 Option 4 Option 5 Mini Size Option 1 Option 2 Option 3 Option 4 Option 5

Additional sizes: medium, small, and mini. Configure them using the size property.

<fx-dropdown split-button type="primary">
  Default Size
  <fx-dropdown-menu slot="dropdown">
    <fx-dropdown-item>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item>Option 4</fx-dropdown-item>
    <fx-dropdown-item>Option 5</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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item>Option 4</fx-dropdown-item>
    <fx-dropdown-item>Option 5</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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item>Option 4</fx-dropdown-item>
    <fx-dropdown-item>Option 5</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>Option 1</fx-dropdown-item>
    <fx-dropdown-item>Option 2</fx-dropdown-item>
    <fx-dropdown-item>Option 3</fx-dropdown-item>
    <fx-dropdown-item>Option 4</fx-dropdown-item>
    <fx-dropdown-item>Option 5</fx-dropdown-item>
  </fx-dropdown-menu>
</fx-dropdown>
Expand Copy
Parameter Description Type Options Default
type Menu button type, same as Button component (only effective when split-button is true) string — —
size Menu size, also affects trigger button when split-button is true string medium / small / mini —
split-button Display trigger element as button group boolean — false
placement Menu popup position string top/top-start/top-end/bottom/bottom-start/bottom-end bottom-end
trigger Trigger behavior string hover, click hover
hide-on-click Whether to hide menu after clicking menu item boolean — true
show-timeout Delay before showing dropdown (only effective when trigger is hover) number — 250
hide-timeout Delay before hiding dropdown (only effective when trigger is hover) number — 150
tabindex Dropdown component's tabindex (opens new window) number — 0
disabled Disable state boolean — —
Name Description
— Element that triggers dropdown display. Must be an element or component
dropdown Dropdown list, typically the <fx-dropdown-menu> component
Event Name Description Parameters
click Callback when left button is clicked (when split-button is true) —
command Callback when menu item is clicked dropdown-item's command
visible-change Triggered when dropdown appears/hides true when appears, false when hides
Parameter Description Type Options Default
command Command string/number/object — —
disabled Disabled state boolean — false
divided Divider line boolean — false
icon Icon class name string — —
Notification
Steps

← Steps→