Dropdown
介紹使用 Dropdown 下拉式選單元件
Dropdown 下拉式選單，用在讓使用者針對選取的資料採取下一步互動。點擊按鈕會出現一個懸浮區域，裡面是一系列的選項，外觀與 Select 相似，但與 Select 最大的不同之處在於 Dropdown 點擊選項後觸發選項事件，並且關閉懸浮區域。
主題色
<bpa-dropdown v-model="value" :options="options" theme="primary" @click="onClick"/>
大小
<bpa-dropdown v-model="value" :options="options" size="small" @click="onClick"/>
提示文字
<bpa-dropdown v-model="value" :options="options" placeholder="自訂文字" @click="onClick"/>
禁用
<bpa-dropdown v-model="value" :options="options" theme="primary" disabled @click="onClick"/>
前綴與後綴
<bpa-dropdown v-model="value" :options="options" @click="onClick">
<template v-slot:prefix>Prefix</template>
<template v-slot:affix>Affix</template>
</bpa-dropdown>
如果上層有"position: fixed"
<bpa-dropdown v-model="value" :options="options" fixed @click="onClick"/>
在 bp-form-item 裡面
<bpa-form-item labelFor="bpa-dropdown-{id}-btn">
<bpa-dropdown v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>
客製化列表寬度
<bpa-dropdown v-model="value" :options="options" optionWidth="100px" @click="onClick"/>
Options 與 Methods
//data
options: [
{
type: 'link',
url: '/',
label: 'Internal Link',
},
{
type: 'external-link',
url: 'https://google.com',
label: 'External Link',
},
{
label: 'Text',
}
]
//methods
onClick(item: any){
console.log(item);
}
屬性
Name
Value
Type
Default
Required
Note
primary,
success,
warning,
danger,
primary-ghost,
success-ghost,
warning-ghost,
danger-ghost
Demo
