Dropdown 下拉菜单

展示折叠的下拉菜单

基础用法

基础的下拉菜单，使用方式是用 AtDropdown，AtDropdownMenu 和 AtDropdownItem 的组合

<at-dropdown>
  <span>下拉菜单 <i class="icon icon-chevron-down"></i></span>
  <at-dropdown-menu slot="menu">
    <at-dropdown-item>深圳</at-dropdown-item>
    <at-dropdown-item>广州</at-dropdown-item>
    <at-dropdown-item disabled>上海</at-dropdown-item>
    <at-dropdown-item divided>北京</at-dropdown-item>
    <at-dropdown-item>杭州</at-dropdown-item>
  </at-dropdown-menu>
</at-dropdown>
<at-dropdown>
  <at-button size="small">下拉菜单 <i class="icon icon-chevron-down"></i></at-button>
  <at-dropdown-menu slot="menu">
    <at-dropdown-item>深圳</at-dropdown-item>
    <at-dropdown-item>广州</at-dropdown-item>
    <at-dropdown-item disabled>上海</at-dropdown-item>
    <at-dropdown-item divided>北京</at-dropdown-item>
    <at-dropdown-item>杭州</at-dropdown-item>
  </at-dropdown-menu>
</at-dropdown>

激活的方式

下拉菜单默认使用 hover 的方式激活，可通过参数 trigger 更换激活的方式，支持 click，hover，focus

<at-dropdown>
  <at-button size="small">Hover 菜单 <i class="icon icon-chevron-down"></at-button>
  <at-dropdown-menu slot="menu">
    <at-dropdown-item name="shenzhen">深圳</at-dropdown-item>
    <at-dropdown-item name="guangzhou">广州</at-dropdown-item>
    <at-dropdown-item name="shanghai" disabled>上海</at-dropdown-item>
    <at-dropdown-item name="beijin" divided>北京</at-dropdown-item>
  </at-dropdown-menu>
</at-dropdown>
<at-dropdown trigger="click">
  <at-button size="small">Click 菜单 <i class="icon icon-chevron-down"></at-button>
  <at-dropdown-menu slot="menu">
    <at-dropdown-item name="shenzhen">深圳</at-dropdown-item>
    <at-dropdown-item name="guangzhou">广州</at-dropdown-item>
    <at-dropdown-item name="shanghai" disabled>上海</at-dropdown-item>
    <at-dropdown-item name="beijin" divided>北京</at-dropdown-item>
  </at-dropdown-menu>
</at-dropdown>

菜单的对齐方式

设置属性 placement 更改下拉菜单的对齐方式

<at-dropdown placement="bottom-right">
  <at-button size="small">Hover 菜单 <i class="icon icon-chevron-down"></at-button>
  <at-dropdown-menu slot="menu">
    <at-dropdown-item name="shenzhen">深圳</at-dropdown-item>
    <at-dropdown-item name="guangzhou">广州</at-dropdown-item>
    <at-dropdown-item name="shanghai" disabled>上海</at-dropdown-item>
    <at-dropdown-item name="beijin" divided>北京</at-dropdown-item>
  </at-dropdown-menu>
</at-dropdown>

下拉菜单触发的事件

点击菜单选项触发事件 on-dropdown-command，返回 AtDropdownItem 的 name 值

<at-dropdown placement="bottom-right" @on-dropdown-command="handleCommand">
  <at-button size="small">Hover 菜单 <i class="icon icon-chevron-down"></at-button>
  <at-dropdown-menu slot="menu">
    <at-dropdown-item name="shenzhen">深圳</at-dropdown-item>
    <at-dropdown-item name="guangzhou">广州</at-dropdown-item>
    <at-dropdown-item name="shanghai" disabled>上海</at-dropdown-item>
  </at-dropdown-menu>
</at-dropdown>

Dropdown 参数

Dropdown 事件

DropdownItem 参数