Studio Web ガイド

デリバリー:

最終更新日時 2025年10月31日

タブ

全般

[タブ] コントロールを使用すると、アプリ内の情報をタブで分割できます。タブコントロールの動作は、選択したモード ( 静的または動的) によって異なります。

静的タブ

[タブ] コントロールを追加すると、既定で 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 の場合、実行時にコントロールを無効化します。

動的タブ

動的タブは、実行時にリストのデータソースから生成されます。この機能を使用するには、タブの [動的 ] モードを選択します。これは、必要なタブの数がリスト内の項目によって異なる場合に便利です。

次のプロパティを設定できます。

リストのソース - タブとして表示する項目のソースです。有効なデータ型は、String、Integer、DateTime、DataTable、または Object の配列の配列です。
列 - リストのソースが DataTable 型またはオブジェクトの配列の場合は、特定の列 (DataTable データ型の場合) または特定のプロパティ (オブジェクト配列の場合) を選択します。
ページソース - すべての動的タブで使用するアプリページです。
アクティブなタブのインデックス - このプロパティを使用して、特定のタブに移動します。インデックスは 0 から開始します。たとえば、「Tab1」、「Tab2」、「Tab3」、「Tab4」という 4 つの連続したタブがある場合、「Tab1」はインデックス 0を持ち、「Tab2」はインデックス 1を持ち、「Tab3」はインデックス 2を持ち、「Tab4」はインデックス 3を持ちます。

たとえば、Data Service のエンティティで次のような動的タブを使用できます。

動的タブの [ リストのソース ] プロパティが Data Service のエンティティです。たとえば、「Department」です。
```
Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})
```
動的タブの [列 ] プロパティは、選択した Data Service エンティティのフィールドです (例: "Name")。
注: 実行時には、選択したエンティティフィールドのレコード数と同じ数のタブが表示されます。このコントロールは、エンティティの 50 件のレコードを表示するよう制限されています。レコードが 50 件を超える場合は、最初の 50 件が表示されます。
[ ページソース] で、選択したタブに基づいて更新される表を表示するページを設定できます。

実行時に表示されるタブは、Department エンティティの [Name] フィールドのレコードです。タブを切り替えると、表の内容が更新されます。

イベント

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

スタイル

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

注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
スタイル - アクティブなタブと非アクティブなタブのスタイルです。
- 既定 - タブのスタイルはクラシックブラウザータブです。
- ピル - タブの両端が丸みを帯びており、ピルの形に似ています。
- タブの色 - 非アクティブなタブのテキストの色です。
- アクティブなタブの色 - アクティブなタブのテキストの色です。
- タブの背景 - 非アクティブなピルタブの背景色。
- アクティブなタブの背景 - アクティブなピルタブの背景色。
- 大きいタブ - 選択すると、タブが拡大されます。
枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。
フォント - タブのテキストのフォント属性 (フォントファミリ、サイズ、色など) です。既定では、このコントロールの直接の親コンテナーのフォントファミリが継承されます。その場合、フォントに「Inherited」と表示されます。
マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。[上]、[ 下]、[ 左]、[ 右] に別々の値を設定するには、[ マージン] セクションの右側にある[リンク] ボタンを選択します。
サイズ - コントロールの幅と高さです。既定では、サイズは [ auto] に設定されています。最小値または最大値を設定するには、3 点リーダー (...) を選択します。コントロールのサイズがオプションよりも小さい場合は、スクロールバーが表示されます。

VB のプロパティ

VB のプロパティ	データ型	説明
`ActiveTabIndex`	Integer	現在アクティブなタブのインデックスです。
`ActiveTabName`	文字列	現在アクティブなタブの名前です。
`Hidden`	Boolean	true の場合、実行時にコントロールが非表示になります。
`Disabled`	Boolean	true の場合、実行時にコントロールを無効化します。
`SelectedItem`	`Apps.Controls.TabularInitClass`	[ タブ] コントロールで現在選択されているタブです。

重要:

静的モードでは、SelectedItemとActiveTabNameは同じです。

動的モードの場合:

データソースがプリミティブ型を使用している場合、 SelectedItem と ActiveTabName は同じです。
データソースがデータテーブルまたはオブジェクトのリストの場合、 SelectedItem には選択されたレコード全体が含まれます。ActiveTabName には、タブに表示されている名前のみが表示されます。