彈出式選單 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div>
    <button class="ts-button is-secondary is-icon">
        <span class="ts-icon is-ellipsis-icon"></span>
    </button>
    <div class="ts-dropdown is-visible is-bottom-right">
        <button class="item">下載</button>
        <button class="item">重新命名</button>
        <button class="item">刪除</button>
    </div>
</div>

概要

這個元件和選單非常相似，適合用於需要展開一個功能選單的時候（例如：更多選項）。這個元素會浮動貼齊其父容器，通常需要再包覆一層 <div> 作為對齊依據。

使用時需自行搭配 JavaScript 操控元件的可見度狀態。

狀態

可見的

下拉式選單型態預設是隱藏的，必須指定為「可見的」才會顯示在頁面上。這個設計是為了讓 JavaScript 能夠切換其可見度。

<div>
    <button class="ts-button is-secondary">選擇表情</button>
    <div class="ts-dropdown is-visible is-start-icon is-bottom-left">
        <button class="item">
            <span class="ts-icon is-face-laugh-icon"></span> 非常滿意
        </button>
        <button class="item">
            <span class="ts-icon is-face-meh-icon"></span> 一般
        </button>
        <button class="item">
            <span class="ts-icon is-face-angry-icon"></span> 糟透了
        </button>
    </div>
</div>

啟用的

表示目前已經被啟用或是正在呈現的相關功能。

<div class="ts-dropdown is-visible">
    <a class="item">個人資料</a>
    <a class="item is-active">位置分享</a>
    <a class="item">設定</a>
</div>

停用的

使項目呈現無法互動、點擊的模樣。

<div class="ts-dropdown is-visible">
    <a class="item">無線通訊</a>
    <a class="item is-disabled">地圖紀錄</a>
    <a class="item">導航設定</a>
</div>

已選擇

可用於下拉式選單用來表示某個項目被選中，可能是某個欄位目前的內容值。

<div class="ts-dropdown is-visible">
    <a class="item">5 分鐘後提醒我</a>
    <a class="item is-selected">1 小時候提醒我</a>
    <a class="item">永不提醒</a>
</div>

內容

註釋

以較淺的文字說明特定項目。

<div class="ts-dropdown is-visible">
    <a class="item">
        下載
        <span class="description">Ctrl + D</span>
    </a>
    <a class="item">
        儲存圖片
        <span class="description">Ctrl + S</span>
    </a>
    <a class="item">
        全選
        <span class="description">Ctrl + A</span>
    </a>
</div>

標題

分隔項目之間的分類標題。

<div class="ts-dropdown is-visible">
    <div class="item is-header">台灣</div>
    <a class="item">高雄市, 鳳山區</a>
    <a class="item">台北市, 大安區</a>
    <div class="item is-header">香港</div>
    <a class="item">長沙灣, 海麗街</a>
    <a class="item">元朗, 福順街</a>
</div>

大頭貼

項目前面可以放置大頭貼作為輔助人名使用。

<div class="ts-dropdown is-visible">
    <a class="item">
        <span class="ts-avatar is-circular">
            <img src="user.png">
        </span>
        Yami Odymel
    </a>
    <a class="item">
        <span class="ts-avatar is-circular">
            <img src="user.png">
        </span>
        Xiaoan
    </a>
    <a class="item">
        <span class="ts-avatar is-circular">
            <img src="user.png">
        </span>
        Kitsune
    </a>
</div>

外觀

分開的

使項目之間有空白間隔區分而不會相黏。

<div class="ts-dropdown is-separated is-visible">
    <a class="item">
        <span class="ts-icon is-user-icon"></span> 使用者
    </a>
    <a class="item is-active">
        <span class="ts-icon is-house-icon"></span> 首頁
    </a>
    <a class="item">
        <span class="ts-icon is-newspaper-icon"></span> 新聞
    </a>
</div>

帶圖示的

選單項目的起始或結束位置可以帶有圖示輔助。

<div class="ts-dropdown is-start-icon is-visible">
    <a class="item">
        <span class="ts-icon is-magnifying-glass-icon"></span> 搜尋
    </a>
    <a class="item">
        <span class="ts-icon is-vials-icon"></span> 實驗區
    </a>
    <a class="item">
        <span class="ts-icon is-atom-icon"></span> 原子測試
    </a>
</div>
<div class="ts-dropdown is-end-icon is-visible" style="margin-left: 9rem;">
    <a class="item">
        我的最愛 <span class="ts-icon is-heart-icon"></span>
    </a>
    <a class="item">
        已讚好內容 <span class="ts-icon is-thumbs-up-icon"></span>
    </a>
    <a class="item">
        封存項目 <span class="ts-icon is-box-archive-icon"></span>
    </a>
</div>

可捲動的

若選單項目過多，可以試著將其指定為可捲動的，選單便不會過長。在不同螢幕大小上可供捲動的長度也不同。

裝置尺寸	狀態指示	當螢幕尺寸 .. 時出現	高度
最小化	目前	< 766px	10rem（≈190px）
預設	目前	≥ 766px 和 < 993px	15rem（≈285px）
最大化	目前	> 993px	19rem（≈361px）

Taiwan

<div class="ts-select is-active">
    <div class="content">
        <span class="ts-flag is-tw-flag"></span> Taiwan
    </div>
    <div class="ts-dropdown is-scrollable is-visible is-bottom">
        <button class="item">
            <span class="ts-flag is-us-flag"></span> United States
        </button>
        <button class="item is-selected">
            <span class="ts-flag is-tw-flag"></span> Taiwan
        </button>
        <button class="item">
            <span class="ts-flag is-my-flag"></span> Malaysia
        </button>
        <button class="item">
            <span class="ts-flag is-cn-flag"></span> China
        </button>
        <button class="item">
            <span class="ts-flag is-hk-flag"></span> Hong Kong
        </button>
        <button class="item">
            <span class="ts-flag is-jp-flag"></span> Japan
        </button>
        <button class="item">
            <span class="ts-flag is-gb-flag"></span> United Kingdom
        </button>
        <button class="item">
            <span class="ts-flag is-br-flag"></span> Brazil
        </button>
        <button class="item">
            <span class="ts-flag is-vn-flag"></span> Vietnam
        </button>
        <button class="item">
            <span class="ts-flag is-gr-flag"></span> Greece
        </button>
    </div>
</div>

貼齊上下邊

下拉式選單可以透過 is-top（上面）和 is-bottom（下面）選擇要貼齊父容器的哪邊，這同時會讓選單以流動的方式填滿左右寬度。如果容器的寬度小於選單裡的項目，則會以項目寬度為主。

由於 CSS 的先天限制，如果項目會超出容器的寬度，請考慮使用 is-top-center（上面置中）與 is-bottom-center（下面置中）。

<div style="display: inline-block;">
    <button class="ts-button is-start-labeled-icon is-secondary">
        <span class="ts-icon is-ellipsis-icon"></span>
        更多功能
    </button>
    <div class="ts-dropdown is-bottom is-visible">
        <button class="item">新增檔案</button>
        <button class="item">資訊</button>
        <div class="ts-divider"></div>
        <button class="item">刪除檔案</button>
    </div>
</div>

貼齊角落

下拉式選單可以選擇要貼齊父容器的哪個角落，透過 is-top-left（左上）、is-top-right（右上）和 is-bottom-left（左下）、is-bottom-right（右下）指定。

<div>
    <button class="ts-button is-secondary is-start-icon">
        <span class="ts-icon is-wand-magic-sparkles-icon"></span>
        施展神秘魔法
    </button>
    <div class="ts-dropdown is-top-left is-visible">
        <button class="item">隕石術</button>
        <button class="item">火焰術</button>
        <div class="ts-divider"></div>
        <button class="item">回復術</button>
    </div>
</div>

尺寸

更改下拉式選單項目的大小。

<div class="ts-dropdown is-large is-visible">
    <a class="item">大型項目</a>
    <a class="item">大型項目</a>
</div>
<div class="ts-dropdown is-visible" style="margin-left: 7rem;">
    <a class="item">預設項目</a>
    <a class="item">預設項目</a>
</div>
<div class="ts-dropdown is-small is-visible" style="margin-left: 14rem;">
    <a class="item">小型項目</a>
    <a class="item">小型項目</a>
</div>

密度

下拉式選單裡項目的間距可以更密或是更寬鬆。

<div class="ts-dropdown is-relaxed is-visible">
    <a class="item">寬鬆項目</a>
    <a class="item is-active">寬鬆項目</a>
    <a class="item">寬鬆項目</a>
</div>
<div class="ts-dropdown is-visible" style="margin-left: 7rem;">
    <a class="item">預設項目</a>
    <a class="item is-active">預設項目</a>
    <a class="item">預設項目</a>
</div>
<div class="ts-dropdown is-dense is-visible" style="margin-left: 14rem;">
    <a class="item">緊密項目</a>
    <a class="item is-active">緊密項目</a>
    <a class="item">緊密項目</a>
</div>

組合應用

搜尋輸入欄位

透過結合輸入欄位可以打造出一個能讓使用者搜尋且選擇項目的下拉欄位。

<div>
    <div class="ts-input">
        <input type="text" placeholder="輸入使用者名稱…" />
    </div>
    <div class="ts-dropdown is-bottom is-visible">
        <button class="item">Yami Odymel</button>
        <button class="item is-active">Caris Events</button>
        <button class="item">Tunalog</button>
    </div>
</div>

標註使用者

透過與下拉式選擇搭配使用，打造一個用於在電子信箱或標註人名時，可供新增更多使用者的下拉式選擇欄位。

蓋歐露易絲

古伊奈

<div class="ts-select is-fluid is-active">
    <div class="content">
        <div class="ts-chip">
            <div class="ts-image">
                <img src="user.png" />
            </div>
            蓋歐露易絲
            <button class="ts-close is-small"></button>
        </div>
        <div class="ts-chip">
            <div class="ts-image">
                <img src="user.png" />
            </div>
            古伊奈
            <button class="ts-close is-small"></button>
        </div>
    </div>
    <div class="ts-dropdown is-bottom">
        <a class="item">
            <span class="ts-avatar is-circular">
                <img src="user.png">
            </span>
            斯提亞拉
        </a>
        <a class="item">
            <span class="ts-avatar is-circular">
                <img src="user.png">
            </span>
            五月雨
        </a>
    </div>
</div>

在尋找相似的元件嗎？