範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
概要
這個元件和選單非常相似，適合用於需要展開一個功能選單的時候（例如：更多選項）。這個元素會浮動貼齊其父容器，通常需要再包覆一層 <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">
下載
<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">
<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-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 is-fluid">
<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>