Dropdown下拉元件
下拉元件用來在彈出式選單中顯示特定內容，通常會和選單元件一起使用。
按需引入元件：
import 'mdui/components/dropdown.js';
按需引入元件的 TypeScript 型別：
import type { Dropdown } from 'mdui/components/dropdown.js';
使用範例：
open dropdown
Item 1
Item 2
<mdui-dropdown>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
open dropdown
Item 1
Item 2
<mdui-dropdown disabled>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
原始碼
使用 placement 屬性可以設定下拉元件的開啟位置。
open dropdown
Item 1
Item 2
<mdui-dropdown placement="right-start">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
原始碼
使用 trigger 屬性可以設定下拉元件的觸發方式。
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="hover">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
原始碼
加上 open-on-pointer 屬性後，就能在指標位置開啟下拉元件。通常會搭配 trigger="contextmenu" 使用，做出以滑鼠右鍵開啟選單的效果。
在此區域使用滑鼠右鍵開啟選單
Item 1
Item 2
<mdui-dropdown trigger="contextmenu" open-on-pointer>
<mdui-card slot="trigger" style="width:100%;height: 80px">在此區域使用滑鼠右鍵開啟選單</mdui-card>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
原始碼
在下拉元件中使用選單時，預設點擊選單項目後，會自動關閉下拉元件。你可以透過加上 stay-open-on-click 屬性，讓點擊選單項目時保持下拉元件的開啟狀態。
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="click" stay-open-on-click>
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
原始碼
在設定了 trigger="hover" 時，可以透過 open-delay、close-delay 屬性設定開啟和關閉的延遲。
open dropdown
Item 1
Item 2
<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
<mdui-button slot="trigger">open dropdown</mdui-button>
<mdui-menu>
<mdui-menu-item>Item 1</mdui-menu-item>
<mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
原始碼| HTML 屬性 | JavaScript 屬性 | Reflect | 型別 | 預設值 |
|---|
open | open | | boolean | false |
是否開啟下拉元件
|
disabled | disabled | | boolean | false |
是否停用下拉元件
|
trigger | trigger | | 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string | 'click' |
下拉元件的觸發方式，支援多個值，用空格分隔。可選值包括：
click：點擊觸發hover：滑鼠懸停觸發focus：聚焦觸發contextmenu：滑鼠右鍵點擊、或觸控長按觸發manual：僅能透過程式方式開啟和關閉下拉元件，不能再指定其他觸發方式
|
placement | placement | | 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' |
下拉元件內容的位置。可選值包括：
auto：自動判斷位置top-start：上方左對齊top：上方置中top-end：上方右對齊bottom-start：下方左對齊bottom：下方置中bottom-end：下方右對齊left-start：左側頂部對齊left：左側置中left-end：左側底部對齊right-start：右側頂部對齊right：右側置中right-end：右側底部對齊
|
stay-open-on-click | stayOpenOnClick | | boolean | false |
點擊 <mdui-menu-item> 後，下拉元件是否保持開啟狀態
|
open-delay | openDelay | | number | 150 |
滑鼠懸停觸發下拉元件開啟的延遲，單位為毫秒
|
close-delay | closeDelay | | number | 150 |
滑鼠懸停觸發下拉元件關閉的延遲，單位為毫秒
|
open-on-pointer | openOnPointer | | boolean | false |
是否在觸發下拉元件的游標位置開啟下拉元件，常用於滑鼠右鍵選單
|
| 名稱 |
|---|
open |
下拉元件開始開啟時觸發。可透過呼叫 event.preventDefault() 阻止下拉元件開啟
|
opened |
下拉元件開啟動畫完成時觸發
|
close |
下拉元件開始關閉時觸發。可透過呼叫 event.preventDefault() 阻止下拉元件關閉
|
closed |
下拉元件關閉動畫完成時觸發
|
