促銷活動
查看我們最新的促銷商品!
<div class="ts-segment is-dense" style="width: 250px;">
<div class="ts-menu is-start-icon is-separated">
<a class="item">
<span class="ts-icon is-house-icon"></span> 首頁
</a>
<a class="item is-active">
<span class="ts-icon is-gauge-high-icon"></span> 儀表板
</a>
<a class="item">
<span class="ts-icon is-table-icon"></span> 訂單
</a>
<div class="ts-divider"></div>
<a class="item">
<span class="ts-icon is-gears-icon"></span> 設定
</a>
</div>
</div>
選單是一個提供垂直可選項目清單的元件,如果希望建立一個左右水平的導覽選單則可以考慮使用分頁籤。
這個元件同時也被設計作為右鍵選單、下拉式選單的基礎設計,如果在網頁或是應用程式裡需要一個右鍵選單則可以考慮使用此選單元件並將其設為「下拉式選單的」來達成。
表示目前已經被啟用或是正在呈現的相關功能。
<div class="ts-menu">
<a class="item">個人資料</a>
<a class="item is-active">位置分享</a>
<a class="item">設定</a>
</div>
使項目呈現無法互動、點擊的模樣。
<div class="ts-menu">
<a class="item">無線通訊</a>
<a class="item is-disabled">地圖紀錄</a>
<a class="item">導航設定</a>
</div>
可用於下拉式選單用來表示某個項目被選中,可能是某個欄位目前的內容值。
<div class="ts-menu">
<a class="item">蘋果</a>
<a class="item is-selected">鳳梨</a>
<a class="item">西瓜</a>
</div>
以較淺的文字說明特定項目。
<div class="ts-box is-collapsed">
<div class="ts-menu is-collapsed">
<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>
項目前面可以放置大頭貼作為輔助人名使用。
<div class="ts-box is-collapsed">
<div class="ts-menu is-collapsed">
<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>
在項目裡擺放計數徽章會自動移至最尾端。
<div class="ts-box is-collapsed">
<div class="ts-menu is-collapsed is-start-icon">
<a class="item is-active">
<span class="ts-icon is-inbox-icon"></span>
收件匣
<div class="ts-badge is-inverted is-small is-dense">3</div>
</a>
<a class="item">
<span class="ts-icon is-bookmark-icon"></span>
重要郵件
</a>
<a class="item">
<span class="ts-icon is-circle-exclamation-icon"></span>
垃圾郵件
<div class="ts-badge is-small is-dense">64</div>
</a>
</div>
</div>
選單項目的起始或結束位置可以帶有圖示輔助。
<div class="ts-box">
<div class="ts-menu is-start-icon">
<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>
<div class="ts-box">
<div class="ts-menu is-end-icon">
<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>
</div>
更改選單項目的大小。
<div class="ts-box">
<div class="ts-menu is-large is-start-icon">
<a class="item">
<span class="ts-icon is-star-icon"></span> 常用聯絡人
</a>
<a class="item">
<span class="ts-icon is-users-icon"></span> 聯絡人
</a>
</div>
</div>
<div class="ts-box">
<div class="ts-menu is-start-icon">
<a class="item">
<span class="ts-icon is-star-icon"></span> 常用聯絡人
</a>
<a class="item">
<span class="ts-icon is-users-icon"></span> 聯絡人
</a>
</div>
</div>
<div class="ts-box">
<div class="ts-menu is-small is-start-icon">
<a class="item">
<span class="ts-icon is-star-icon"></span> 常用聯絡人
</a>
<a class="item">
<span class="ts-icon is-users-icon"></span> 聯絡人
</a>
</div>
</div>
選單裡項目的間距可以更密或是更寬鬆。
<div class="ts-menu is-relaxed is-start-icon is-separated">
<a class="item">
<span class="ts-icon is-house-icon"></span> 首頁
</a>
<a class="item is-active">
<span class="ts-icon is-gauge-high-icon"></span> 儀表板
</a>
<a class="item">
<span class="ts-icon is-table-icon"></span> 訂單
</a>
</div>
<div class="ts-menu is-start-icon is-separated">
<a class="item">
<span class="ts-icon is-house-icon"></span> 首頁
</a>
<a class="item is-active">
<span class="ts-icon is-gauge-high-icon"></span> 儀表板
</a>
<a class="item">
<span class="ts-icon is-table-icon"></span> 訂單
</a>
</div>
<div class="ts-menu is-dense is-start-icon is-separated">
<a class="item">
<span class="ts-icon is-house-icon"></span> 首頁
</a>
<a class="item is-active">
<span class="ts-icon is-gauge-high-icon"></span> 儀表板
</a>
<a class="item">
<span class="ts-icon is-table-icon"></span> 訂單
</a>
</div>
當選單成為下拉式選單時會成為浮動元素並帶有陰影、框線和較小且密集的項目樣式。
<div style="display: inline-block; margin-bottom: 8rem;">
<button class="ts-button is-secondary is-icon">
<span class="ts-icon is-ellipsis-icon"></span>
</button>
<div class="ts-menu is-dropdown is-visible is-bottom-left">
<button class="item">下載</button>
<button class="item">重新命名</button>
<button class="item">刪除</button>
</div>
</div>
下拉式選單型態預設是隱藏的,必須指定為「可見的」才會顯示在頁面上。這個設計是為了讓 JavaScript 能夠切換其可見度。
<div style="display: inline-block; margin-bottom: 8rem;">
<button class="ts-button is-secondary">選擇表情</button>
<div class="ts-menu is-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>
選單可以選擇要貼齊父容器的哪個角落,透過 is-top-left
、is-top-right
和 is-bottom-left
、is-bottom-right
指定。
<div style="display: inline-block; margin-top: 8rem;">
<button class="ts-button is-secondary is-start-icon">
<span class="ts-icon is-wand-magic-sparkles-icon"></span>
施展魔法
</button>
<div class="ts-menu is-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 style="margin-bottom: 11rem;">
<div class="ts-input is-fluid">
<input type="text" placeholder="輸入使用者名稱…" />
</div>
<div class="ts-menu is-dropdown is-fluid is-visible is-bottom-left">
<button class="item">Yami Odymel</button>
<button class="item is-active">Caris Events</button>
<button class="item">Tunalog</button>
</div>
</div>
<div class="ts-box" style="width: 250px;">
<div class="ts-content">
<div class="ts-input is-fluid">
<input type="text" placeholder="搜尋…">
</div>
</div>
<div class="ts-divider"></div>
<div class="ts-menu is-start-icon">
<a class="item">
<span class="ts-icon is-house-icon"></span> 首頁
</a>
<a class="item is-active">
<span class="ts-icon is-gauge-high-icon"></span> 儀表板
</a>
<a class="item">
<span class="ts-icon is-table-icon"></span> 訂單
</a>
<div class="ts-divider"></div>
<a class="item">
<span class="ts-icon is-gears-icon"></span> 設定
</a>
</div>
</div>
<div class="ts-box is-collapsed">
<div class="ts-menu is-collapsed">
<a class="item">
<div class="ts-iconset is-outlined">
<span class="ts-icon is-bullhorn-icon"></span>
<div class="content">
<div class="title">促銷活動</div>
<div class="text">查看我們最新的促銷商品!</div>
</div>
</div>
</a>
<div class="ts-divider"></div>
<a class="item">
<div class="ts-iconset is-outlined">
<span class="ts-icon is-ticket-simple-icon"></span>
<div class="content">
<div class="title">優惠券</div>
<div class="text">看看我們所販售的優惠券。</div>
</div>
</div>
</a>
<div class="ts-divider"></div>
<a class="item">
<div class="ts-iconset is-outlined">
<span class="ts-icon is-truck-icon"></span>
<div class="content">
<div class="title">退貨</div>
<div class="text">
不滿意商品?查看我們的無條件退貨機制。
</div>
</div>
</div>
</a>
</div>
</div>