タブ

912 views

タブグループ

［タブ］コントロールの外枠をに対応したコントロールです。

コンポーネントを配置すると、デフォルトで以下のコードが定義されます。

<mat-tab-group selectedIndex=”0″ data-comp-id=”tabs-group.1″ id=”tabs-group.1″></mat-tab-group>

以下のプロパティがあります。

プロパティ	内容
Data	Magic プログラムで定義された［タブ］コントロールを指定します。歯車ボタンをクリックすると項目一覧が表示されます。ここから［タブ］コントロールを選択することができます。
Id	識別用のコードです。HTML 内で “id” の値として定義されます。［アウトライン］タブ上で表示されます。
XPAとタブを同期	[Data]に［タブ］コントロールが定義されている場合に有効です。クリックすると、Magic xpa プログラムの［タブ］コントロールとの同期処理を実行し、キャビネットにタブを定義します。
Alignment	タブ内のテキスト表示の整列方法を指定します。以下から選択できます. Default Left …… 左寄せ Right …… 右寄せ Center …… 中央寄せ Justify …… 均等割付
Active Tab	起動時にデフォルトで表示されるタブを指定します。 “0” が一番左端になります。各タブを操作する前にこのAcriveTabを設定してからコンテナやボタンを配置していくこととなります

タブ

プロパティ	内容
Tab Label	mg.getTabpageText(mgc.XXXXXXXX, index番号 0から始まる数値)
Id	識別用のコードです。HTML 内で “id” の値として定義されます。［アウトライン］タブ上で表示されます。
Class	任意のクラスを定義することができます。
Alignment	タブ内のテキスト表示の整列方法を指定します。以下から選択できます。 Default Left …… 左寄せ Right …… 右寄せ Center …… 中央寄せ Justify …… 均等割付

Dataにはmgc.Tab3と関連付けたのち、タブを5個貼り付けます。

タブの移動にはActiveTabに0～4の値を設定します。0が一番左となります。