台灣正體

彈出式選單

附著於某個元素且浮動可隱藏的功能選單。
初入上手
開始使用 Getting Started 主題色系 Colors 響應式設計 Responsive 輔助樣式 Utilities
格局設計
箱型容器 Box 絕對置中 Center 界限容器 Container 內容區塊 Content 表單控制項 Control 網格系統 Grid 空白間隔 Space 水平排列 Row 間隔容器 Wrap
表單
按鈕 Button 核取方塊 Checkbox 欄位分組 Fieldset 檔案上傳 File 輸入欄位 Input 選項按鈕 Radio 下拉式選擇 Select 項目切換 Selection 指撥開關 Switch
文字與段落
分隔線 Divider 標題 Header 內容遮罩 Mask 引言 Quote 片段 Segment 文字 Text
視覺回饋
圓形量測計 Gauge 讀取狀態 Loading 快顯視窗 Modal 提示訊息 Notice 預置內容 Placeholder 步驟指示器 Procedure 進度條 Progress 簡短通知 Snackbar
多媒體與圖示
大頭貼 Avatar 國家旗幟 Flag 圖示 Icon 圖示項目 Iconset 多媒體圖片 Image 圖片組合 Imageset
資料顯示
可折疊內容 Accordion 計數徽章 Badge 檢查清單 Checklist 關聯標籤 Chip 關閉按鈕 Close 交談會話 Conversation 清單 List 中繼資料 Meta 評分 Rating 統計數據 Statistic 表格 Table 時間軸 Timeline
導覽
導覽標記 Breadcrumb 彈出式選單 Dropdown 選單 Menu 頁數導覽列 Pagination 分頁籤 Tab
應用程式
邊緣抽屜 App Drawer 格局劃分 App Layout 導航列 App Navbar 側邊欄 App Sidebar 頂部列 App Topbar
JavaScript 模組
選單模組 Module Dropdown 工具提示 Module Tooltip 分頁模組 Module Tab 樣式切換 Module Toggle
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<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">
    <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>
可捲動的

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

高度
10rem(≈190px)
15rem(≈285px)
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>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標