台灣正體

樣式切換

與某個元素互動來切換另一個元素的樣式類別。
初入上手
開始使用 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
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<button class="ts-button" data-toggle="btn:is-outlined" data-name="btn">
    按我切換樣式 😮
</button>
概要

這個 JavaScript 模組能讓你很輕易地就透過按鈕來切換某個容器的 CSS 樣式類別。

在可供互動的元素上套用 [data-toggle="名稱:樣式名稱"] 並在目標元素套用 [data-name="名稱"],就能夠透過點擊互動元素來切換目標的 CSS 樣式類別。

組合應用

頂部列可以擺放一個漢堡選單按鈕,然後透過樣式切換來控制一個容器的可見度,用以在行動裝置上開關一個進階選單。

<div class="ts-app-topbar">
    <div class="start">
        <a class="item" data-toggle="menu:u-hidden">
            <span class="ts-icon is-bars-icon"></span>
        </a>
        <div class="item is-text">應用程式</div>
    </div>
    <div class="content u-hidden" data-name="menu">
        <div class="ts-menu is-separated is-start-icon u-dark">
            <a class="item">
                <span class="ts-icon is-inbox-icon"></span>
                收件匣
            </a>
            <a class="item">
                <span class="ts-icon is-bookmark-icon"></span>
                重要郵件
            </a>
        </div>
    </div>
</div>
快顯視窗

透過樣式切換來開關一個快顯視窗的可見度,只需要按下按鈕就可以打開快顯視窗。

如果你需要監聽開關事件並做額外處理(例如:打開視窗時才載入 YouTube 嵌入影片、資料…等),則建議自行額外撰寫 JavaScript 程式碼並開關其 is-visible 樣式。

好了,現在你可以透過下面的關閉按鈕把我關閉了。

這個關閉按鈕也是透過 [data-toggle] 來切換快顯視窗的可見度。

<button class="ts-button" data-toggle="modal:is-visible">
    打開快顯視窗
</button>
<div class="ts-modal" data-name="modal">
    <div class="content">
        <div class="ts-content is-padded">
            <p>好了,現在你可以透過下面的關閉按鈕把我關閉了。</p>
            <p>這個關閉按鈕也是透過 [data-toggle] 來切換快顯視窗的可見度。</p>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content is-tertiary is-horizontally-padded">
            <button class="ts-button" data-toggle="modal:is-visible">
                關閉
            </button>
        </div>
    </div>
</div>
邊緣抽屜

邊緣抽屜快顯視窗一樣,都可以透過樣式切換 CSS 來變更其可見度。

如果你希望使用者可以點擊灰色遮罩的部份來關閉邊緣抽屜,那則需要自行額外撰寫 JavaScript 程式碼。

備註事項
蘆森詩音
天野悟美
佐藤綾
<button class="ts-button" data-toggle="drawer:is-visible">
    打開側邊抽屜
</button>
<div class="ts-app-drawer is-right" data-name="drawer">
    <div class="content">
        <div class="ts-content is-padded">
            <div class="ts-header is-large">備註事項</div>
            <div class="ts-content is-padded">
                <div class="ts-list is-unordered">
                    <div class="item">蘆森詩音</div>
                    <div class="item">天野悟美</div>
                    <div class="item">佐藤綾</div>
                </div>
            </div>
            <button class="ts-button is-fluid" data-toggle="drawer:is-visible">
                關閉
            </button>
        </div>
    </div>
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標