Toggle
Toggle

Toggle

Toggle

讓使用者在「開啟」和「關閉」兩種狀態間切換的開關元件。
💡
此元件分為 iOS 及 Android 兩種 UI 形式，均使用系統原生的元件。
image

⚡️ 相關資源：

icon
Components Figma File
icon
UI Spec Figma File

Anatomy

解構

image
  1. Background 顯示 Toggle 當前的狀態
  2. Handle 讓使用者操作的把手，用來切換 Toogle 的狀態。

States

狀態

image

Behaviors

行為

Immediately activate or deactivate something

變更 Toogle 狀態時，當前狀態將會立即變更
變更 Toogle 狀態時，當前狀態將會立即變更

Usage Guidelines

使用規範

根據系統顯示對應的原生元件 Display native components based on different OS systems

image

勿使用「開啟」和「關閉」作為文字提示 Don’t use “Turn on” or “Turn off” in a toggle label

image

Changelog

Date
Version
Notes
Chapters
Person
August 8, 2023
1.34

・新增 Checkbox / Checkmark / Slider / Toggle

CheckboxCheckmarkSliderToggle
Verna Wang
November 15, 2023
1.35

・調整雙平台 UI 介紹內容，補充 Android 示意圖

Toggle
C
Camille Cheng