Switch (スイッチ)

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

Switch のデモ

操作状態

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

テーマ

Switch は、明暗バリアントで分かりやすく、背景に明暗のコントラストを付けてスタイル設定できます。

レイアウトテンプレート

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

状態

Switch はオンとオフの選択状態を提供します。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

スタイル設定

Switch には、つまみとトラックの色の利用可能なオプション、およびラベルのテキストの色の変更によるスタイリングの柔軟性があります。トラックのアルファ値は、使用されている色に関係なく半透明の外観を実現するように固定されており、Indigo.Design ライブラリの 🧩 Components ページまたはアートボードにある Symbol Master を介してのみグローバルに調整できます。

使用方法

Switch つまみとトラックに同じまたは同様の色を使用します。

良い例	悪い例