Skip to main content

 

パターン

 

 

OutSystems

ToggleButton

ユーザーに2つの状態から選択するように求めます。

ToggleButtonを使用して、エンドユーザーに両立しない2つの状態から好きなほうを選んで、選択するように要求します。トグルはデジタル化されたオン/オフスイッチであるため、常にデフォルト値があります。

使用方法

Web画面にブロックを配置した後、プレースホルダ内にチェックボックスをドラッグすると、パターンが自動的に使用されます。

1.ToggleButtonパターンをプレビューにドラッグします。

1.チェックボックスにBoolean型の変数を設定します。

![](<images/togglebutton-image-1.png>)

1.パブリッシュしてテストします。

![](<images/togglebutton-image-2.png>)

入力パラメータ

入力名 説明 必須 デフォルト値
ExtendedClass このブロックにカスタムスタイルクラスを追加します。 Text False なし

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
.toggle-button .toggle-button-checked Boolean型変数がTrueの場合にトグルボタンのスタイルを設定するクラスセレクタです
.toggle-button .toggle-button-disabled 無効の場合にトグルボタンのスタイルを設定するクラスセレクタです
.toggle-button .toggle-button:after トグルボタンの円形のスタイルを設定する疑似要素セレクタです

高度なユースケース

ToggleButtonパターンを無効にする

1.ToggleButtonパターンをプレビューにドラッグします。

1.チェックボックスにBoolean型の変数を設定します。

![](<images/togglebutton-image-1.png>)

1.チェックボックスで、Enabledパラメータを[False]に設定します。

![](<images/togglebutton-image-4.png>)

1.パブリッシュしてテストします。

![](<images/togglebutton-image-5.png>)
  • Was this article helpful?