Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます

 

 
 
OutSystems

Toggle Button

Toggle Button UIパターンを使用すると、ユーザーが2つの状態(たとえば、Yes/Noの値など)から選択することができるスタンドアロンのコントロールを提供できます。

Toggle Button UIパターンの使用方法

この例では、条件が満たされたときにのみ有効にできるウィジェットを有効にするための切り替えボタンを作成します。

1.Service StudioのツールボックスでToggle Buttonを検索します。

Toggle Buttonウィジェットが表示されます。

![](<images/togglebutton-6-ss.png>)

1.ツールボックスから、Toggle Buttonウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

![](<images/togglebutton-7-ss.png>)

1.画面名を右クリックして[Add Local Variable]を選択します。

![](<images/togglebutton-8-ss.png>)

1.名前を入力し、データ型を選択します。この例では、「IsToggled」という名前を入力し、データ型を[Boolean]に設定し、デフォルト値を[False]に設定しています。

![](<images/togglebutton-9-ss.png>)

1.この例では、テキストとボタンを追加しています。ボタンの名前(「SubmitButton」)を入力し、Enabledプロパティを先ほど作成したローカル変数(IsToggled)に設定します。

![](images/togglebutton-11-ss.png?width=800)

1.Checkboxウィジェットを選択し、[プロパティ]タブの[Variable]ドロップダウンで、先ほど作成したローカル変数(この例では、[IsToggled])を選択します。

![](images/togglebutton-10-ss.png?width=800)

1.OnChangeの[Destination]ドロップダウンで[New Screen Action]を選択します。

![](images/togglebutton-12-ss.png?width=800)

1.ツールボックスからAjax Refreshを画面アクションに追加し、[Select Widget]ポップアップで[Submit]ボタンの名前(この例ではSubmitButton)に移動して選択し、[OK]をクリックします。

![](images/togglebutton-13-ss.png?width=800)

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
ExtendedClass(Text型): オプション Toggle Button UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。



  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるToggle Button UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1 myclass2" - 適用されるToggle Button UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?