選單模組 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<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="名稱"]，就能夠透過點擊互動元素來觸發對應的下拉式選單。

※ Tocas UI 的 JavaScript 模組文件呈現方式正在改善。

使用說明

偏好位置

你可以透過 [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>

在尋找相似的元件嗎？

彈出式選單