メインコンテンツまでスキップ
Version: v6

ion-toggle

shadow

コンテンツ

1つのオプションの状態を切り替えます。Toggleのオン/オフを切り替えるには、Toggleをクリックするかスワイプします。また、 checked プロパティを設定して、プログラムでcheckedすることもできます。

カスタマイズ

背景のカスタマイズ

Toggleトラックとハンドルの背景は、CSS変数を使ってカスタマイズすることができます。また、Toggleがチェックされたときに背景を異なるように設定するための変数もあります。

ion-toggle {
--background: #000;
--background-checked: #7a49a5;

--handle-background: #7a49a5;
--handle-background-checked: #000;
}

これらの変数は background プロパティを設定しますが、これは省略形なので、 background property が受け入れるどんな値でも受け入れることができます。

より複雑なケースでは、ハンドルの背景に画像を追加することもできます。

ion-toggle {
--handle-background-checked: #fff url(/assets/power-icon.png) no-repeat center / contain;
}

さらに一歩進んで、::before::after という擬似要素を使って、テキストを背景の上に配置することもできます。

ion-toggle::before {
position: absolute;

top: 16px;
left: 10px;

content: "ON";

color: white;
font-size: 8px;

z-index: 1;
}

幅のカスタマイズ

トグルの幅を小さくすると、トラックの幅が狭くなり、ハンドルはデフォルトの幅のままになります。必要であれば、--handle-widthを設定すると、ハンドルがより狭くなります。

ion-toggle {
width: 40px;
}

Toggleの幅を大きく調整すると、ハンドルはデフォルトの幅のままで、トラックの幅が広くなります。必要であれば、--handle-widthを設定して、ハンドルをより広くすることができます。

ion-toggle {
width: 100px;
}

高さのカスタマイズ

Toggleの高さをデフォルトより小さく調整すると、ハンドルの高さがトラックに合わせて自動的にサイズ調整されます。 ios では、ハンドルはトラックより短く (100% - 4px) 、md では、ハンドルはトラックより高く (100% + 6px) なります。

ion-toggle {
height: 15px;
}
note

Note: これはハンドルの幅には影響しません。幅は --handle-width を使用して設定する必要があります。

Toggleの高さを大きくすると、中央のハンドルはデフォルトの高さに保たれます。これは --handle-height を設定することで変更することができます。これは任意の量を設定することができますが、 --handle-max-height を超えることはありません。

ion-toggle {
height: 60px;
}
note

Note: これはハンドルの幅には影響しません。幅は --handle-width を使用して設定する必要があります。

スペーシングのカスタマイズ

スペーシングとは、ハンドルとトラックの間の水平方向の隙間のことです。デフォルトでは、ios のみでハンドルの周囲に 2px のスペーシングがあります。md` モードでは、デフォルトのスペーシングはありません。

水平方向の**間隔をなくすには、 --handle-spacing0px に設定します。

ion-toggle {
--handle-spacing: 0px;
}

ハンドルの高さが固定されているため、上下の間隔をなくすには、高さを100%に設定します。

ion-toggle {
--handle-spacing: 0px;
--handle-height: 100%;
}

Border Radiusのカスタマイズ

ハンドルのBorder Radius半径を変更するには、--handle-border-radius を使用します。

ion-toggle {
--handle-border-radius: 14px 4px 4px 14px;
}

Toggleがチェックされたときだけ border-radius をターゲットにするには、.toggle-checked をターゲットにします。

ion-toggle.toggle-checked {
--handle-border-radius: 4px 14px 14px 4px;
}

Box Shadowのカスタマイズ

ハンドルの box-shadow を変更するには、--handle-box-shadow を使用することができます。

ion-toggle {
--handle-box-shadow: 4px 0 2px 0 red;
}

Toggleがチェックされたときだけボックスシャドウをターゲットにするには、.toggle-checkedをターゲットにします。

ion-toggle.toggle-checked {
--handle-box-shadow: -4px 0 2px 0 red;
}

box-shadow` が Toggle コンテナをオーバーフローするようにするには、customizing overflow のセクションを参照してください。

Overflowのカスタマイズ

Toggleで overflow を設定すると、Toggleハンドルに継承されます。デフォルトでは、オーバーフローは ios でのみ hidden に設定されています。 box-shadowcontain css プロパティによって切り取られたまま表示されます。toggleコンテナをオーバーフローさせるには、 containnone に設定します。

ion-toggle {
--handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);

overflow: visible;

contain: none;
}

Interfaces

ToggleChangeEventDetail

interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}

ToggleCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}

使い方

<!-- Default Toggle -->
<ion-toggle></ion-toggle>

<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>

<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>

<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>

<!-- Toggles in a List -->
<ion-list>
<ion-item>
<ion-label>Pepperoni</ion-label>
<ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
</ion-item>

<ion-item>
<ion-label>Sausage</ion-label>
<ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
</ion-item>

<ion-item>
<ion-label>Mushrooms</ion-label>
<ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
</ion-item>
</ion-list>

プロパティ

checked

DescriptionIf true, the toggle is selected.
Attributechecked
Typeboolean
Defaultfalse

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the toggle.
Attributedisabled
Typeboolean
Defaultfalse

enableOnOffLabels

DescriptionEnables the on/off accessibility switch labels within the toggle.
Attributeenable-on-off-labels
Typeboolean | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

name

DescriptionThe name of the control, which is submitted with the form data.
Attributename
Typestring
Defaultthis.inputId

value

DescriptionThe value of the toggle does not mean if it's checked or not, use the checked property for that.

The value of a toggle is analogous to the value of a <input type="checkbox">, it's only used when the toggle participates in a native <form>.
Attributevalue
Typenull | string | undefined
Default'on'

イベント

NameDescription
ionBlurEmitted when the toggle loses focus.
ionChangeEmitted when the value property has changed.
ionFocusEmitted when the toggle has focus.

メソッド

No public methods available for this component.

CSS Shadow Parts

NameDescription
handleThe toggle handle, or knob, used to change the checked state.
trackThe background track of the toggle.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the toggle
--background-checkedBackground of the toggle when checked
--border-radiusBorder radius of the toggle track
--handle-backgroundBackground of the toggle handle
--handle-background-checkedBackground of the toggle handle when checked
--handle-border-radiusBorder radius of the toggle handle
--handle-box-shadowBox shadow of the toggle handle
--handle-heightHeight of the toggle handle
--handle-max-heightMaximum height of the toggle handle
--handle-spacingHorizontal spacing around the toggle handle
--handle-transitionTransition of the toggle handle
--handle-widthWidth of the toggle handle

Slots

No slots available for this component.

View Source