タブ

全般

[タブ] コントロールを追加すると、既定で 3 つのタブ ([Tab 1]、[Tab 2]、[Tab 3]) が表示されます。コントロール内の各タブを展開すると、以下のプロパティが表示されます。

• タブ名 - タブの表示名です。
• ページ ソース - このタブ内にインポートする Apps のページです。
• 非表示 - true の場合、実行時にコントロールが非表示になります。
• 無効化 - true の場合、実行時にコントロールを無効化します。

以下のプロパティは、[タブ] コントロール全体に適用されます。

• 新しいタブを追加 - プラス記号「+」アイコンをクリックして、データに新しいタブを追加します。

• アクティブなタブのインデックス - このプロパティを使用して、特定のタブに移動します。インデックスは 0 から開始します。たとえば、「Tab1」、「Tab2」、「Tab3」、「Tab4」という 4 つの連続したタブがある場合、「Tab1」はインデックス 0 を持ち、「Tab2」はインデックス 1 を持ち、「Tab3」はインデックス 2 を持ち、「Tab4」はインデックス 3 を持ちます。

• 非表示 - true の場合、実行時にコントロールが非表示になります。

• 無効化 - true の場合、実行時にコントロールを無効化します。

イベント

• 値の変更時 - 値が変更された際の挙動を設定します。

スタイル

• コントロールの配置 - 既定では [画面に合わせて伸縮] に設定されています。別の配置を設定することもできます。

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。

• スタイル - タブのサイズとアクティブなタブの色です。

• 枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。

• フォント - タブのテキストのフォント属性 (フォント ファミリ、サイズ、色など) です。既定では、このコントロールの直接の親コンテナーのフォント ファミリが継承されます。その場合、フォントに「Inherited」と表示されます。

• マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。

• サイズ - コントロールの幅と高さです。既定では、サイズは [auto] に設定されています。最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。コントロールのサイズがオプションよりも小さい場合は、スクロール バーが表示されます。

キーボード ショートカット

アクセシビリティを向上するために、設定パネルの [全般] タブのタブ リストで、以下のキーボード ショートカットを使用できます。

• ↑ キーと ↓ キーを使用して選択中のタブを変更
• Alt + ↑ キーを使用して選択したタブを上に移動
• Alt + ↓ キーを使用して、選択したタブを下に移動

例: 次のタブに移動する

この例では、[タブ] コントロールの次のタブに移動する方法を説明します。

1. アプリで [タブ] コントロールを追加します。「Tab 1」、「Tab 2」、「Tab 3」の 3 つのタブが自動的に作成されます。
2. 新しいページを 2 つ追加し、それぞれに [ボタン] コントロールを追加します。ボタンにそれぞれ「Tab 1 -> Next」および「tab 2 -> Next」という名前を付けます。
3. 「Tab 1」の場合、[ページ ソース] フィールドで、「Tab 1 -> Next」ボタンのある、追加済みのページを参照します。
4. 「Tab 2」の場合、[ページ ソース] フィールドで、「Tab 2 -> Next」ボタンのある、追加済みのページを参照します。アプリは次の画像のようになります。
   
5. 各 [ボタン] コントロールに対してルールを作成します。このルールは、ボタンをクリックしたときに次のタブに移動するようアプリに指示します。
6. Int32 型のアプリ変数を作成し、「var_tab_index」という名前を付けます。
7. [タブ] コントロールを選択し、[アクティブなタブのインデックス] フィールドに var_tab_index 変数を割り当てます。
   
8. [タブ] コントロールを含むメイン ページを選択し、[イベント] タブに移動して、[読み込み時] イベントのルールを作成します。
   1. [値を設定] ルールを追加し、次のように設定します。
      • 設定する項目 - var_tab_index
      • 値 - 0 (Tab 1 のインデックス)
9. 「Tab 1-> Next」という名前の [ボタン] コントロールが含まれるページを選択し、[イベント] タブに移動して、[クリック時] イベントのルールを作成します。
   1. [値を設定] ルールを追加し、次のように設定します。
      • 設定する項目 - var_tab_index
      • 値 - 1 (Tab 2 のインデックス)
10. 「Tab 2-> Next」という名前の [ボタン] コントロールが含まれるページを選択し、[イベント] タブに移動して、[クリック時] イベントのルールを作成します。
    1. [値を設定] ルールを追加し、次のように設定します。
       • 設定する項目 - var_tab_index
       • 値 - 2 (Tab 3 のインデックス)

アプリをプレビューするときに、「Tab 1」のボタンをクリックすると「Tab 2」に移動します。以降も同様です。