範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<button class="ts-button is-start-labeled-icon" data-dropdown="dropdown">
<span class="ts-icon is-chevron-down-icon"></span>
更多功能
</button>
<div class="ts-dropdown" data-name="dropdown">
<button class="item">新增檔案</button>
<button class="item">移至回收桶</button>
<button class="item">檢視資訊</button>
</div>
概要
這個 JavaScript 模組主要與下拉式選單元件搭配,可以讓使用者點擊某個元素的時候打開下拉式選單。
在可供互動的元素上套用 [data-dropdown="名稱"]
並在下拉式選單套用 [data-name="名稱"]
,就能夠透過點擊互動元素來觸發對應的下拉式選單。
使用說明
你可以透過 [data-position]
來指定偏好位置。
說明 | |
---|---|
top | 上方並置中對齊。 |
top-start | 上方並置起始位置(通常是左邊)。 |
top-end | 上方並置結束位置(通常是右邊)。 |
bottom | 預設選項。下方並置中對齊。 |
bottom-start | 下方並置起始位置(通常是左邊)。 |
bottom-end | 下方並置結束位置(通常是右邊)。 |
<div class="ts-segment is-end-aligned">
<button class="ts-button is-icon" data-dropdown="more">
<span class="ts-icon is-ellipsis-vertical-icon"></span>
</button>
<div class="ts-dropdown" data-name="more" data-position="bottom-end">
<button class="item">分享給朋友</button>
<button class="item">引言轉推</button>
</div>
</div>
組合應用
頂部列的尾側可以擺放一個帶有進階功能的選單。
<div class="ts-app-topbar">
<div class="start">
<div class="item is-text">應用程式</div>
</div>
<div class="end">
<button class="item" data-dropdown="app-menu">
<span class="ts-icon is-ellipsis-vertical-icon"></span>
</button>
</div>
</div>
<div class="ts-dropdown" data-name="app-menu" data-position="bottom-end">
<button class="item">關於</button>
<button class="item">檢查更新</button>
</div>
有時候分頁籤的項目太多,可以考慮收納進下拉式選單中。
<div class="ts-tab is-pilled">
<button class="item">主打內容</button>
<button class="item">最新</button>
<button class="item" data-dropdown="others">
<span class="ts-icon is-ellipsis-icon"></span>
更多
</button>
</div>
<div class="ts-dropdown" data-name="others">
<button class="item">遊戲</button>
<button class="item">音樂</button>
<button class="item">影片</button>
</div>
豐富化下拉式選擇欄位能夠選擇的內容,不過你仍需要額外撰寫 JavaScript 來變更其值。
Taiwan
<div class="ts-select" data-dropdown="select">
<div class="content">
<span class="ts-flag is-tw-flag"></span> Taiwan
</div>
</div>
<div class="ts-dropdown" data-name="select" data-position="bottom-start">
<button class="item">
<span class="ts-flag is-gb-flag"></span> United Kingdom
</button>
<button class="item is-selected">
<span class="ts-flag is-tw-flag"></span> Taiwan
</button>
<button class="item">
<span class="ts-flag is-hk-flag"></span> Hong Kong
</button>
</div>
在尋找相似的元件嗎?