ボタンを使用してコンテナーを非表示にする

矢印ボタンを使用し、コンテナーを非表示にしてコンテンツを折りたたんだり、コンテンツを展開したりできます。それには、このページの手順に従ってください。

For this example, we will use the Form C template page from UiPath^® Apps.

1. Create a new app in UiPath^® Apps.

2. 新しいページのテンプレートを選択するよう求められたら、[フォーム C] を選択します。

3. sectionHeader1 コンテナーで、ボタンの横に 2 つのアイコンを追加します。

   • 1 つの keyboard_arrow_up アイコン。名前を [折りたたみ] に変更します。

   • One keyboard_arrow_down icon. Rename it to expand.

     

4. Create an app variable named content_visibility.

5. Configure the collapse icon.

   1. コントロールの [表示>非表示] プロパティに、 = Not(content_visibility)を追加します。

   2. [クリック時] イベントに [値を設定] ルールを追加します。

   3. 手順 4 で作成したアプリ変数をルールの [設定する項目] プロパティに追加し、=false を [値] プロパティに追加します。

      

6. [展開] アイコンを設定します。

   1. コントロールの [表示>非表示] プロパティに、 =content_visibility アプリの変数を追加します。

   2. [クリック時] イベントに [値を設定] ルールを追加します。

   3. 手順 4 で作成したアプリ変数をルールの [設定する項目] プロパティに追加し、=true を [値] プロパティに追加します。

      

7. [フォーム C] ページに [値を設定] ルールを追加します。

   1. 手順 4 で作成したアプリ変数をルールの [設定する項目] プロパティに追加し、=true を [値] プロパティに追加します。

      

アプリをプレビューすると、1 つ目のコンテナーのヘッダーに 1 つの矢印ボタンが表示されます。そのボタンをクリックすると、コンテンツを折りたたむことができます。再度クリックすると、コンテンツが展開されます。