Switch (スイッチ)

    Switch コンポーネント シンボルは、ユーザーが設定一覧でオン/オフするための構成です。Switch は、Ignite UI for Angular Switch コンポーネントと視覚的に同じものです。

    Switch のデモ

    操作状態

    Switch は、有効または無効の状態で挿入できます。

    レイアウト テンプレート

    Figma と Sketch で Switch は、Switch 要素の前後に Switch ラベルが配置されるラベル位置のバリアントをサポートします。Adobe XD では、Stacks を使用して、スイッチのビジュアルの左または右にドラッグするだけで、デザイン時にラベルとスイッチの位置を変更できるようにしています。

    状態

    Switch はオンとオフの選択状態を提供します。Figma では、右側のサイドバーからプロパティを選択できます。Sketch では、これを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

    スタイル設定

    Switch には、Thumb と Track の色の利用可能なオプション、および Label のテキストの色の変更を通じて、スタイルの柔軟性が備わっています。

    使用方法

    Switch の Thumb と Track に同じまたは同様の色を使用します。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。