タブ

「タブ」ウィジェットは、特殊なタイプのコンテナです。ウィジェット内の各タブに、そのタブ専用のコンテンツが表示されます。一度に表示できるタブは 1 つだけですが、タブをすばやく切り替えることができるように、すべてのタブにコンテンツがロードされます。

ビューの切り替え、データセットの切り替え、エクスペリエンスの機能性など、高度なコンテンツ編成を行う場合は、タブを使用します。たとえば、特定のトラックの 3 つのモデルデータを表示する場合、タブを使用すると、エクスペリエンスの閲覧者は 3 つすべてのトラックの情報を簡単に切り替えることができます。

プロパティ

JavaScript

タイプ

説明

タブの方向

taborientation

string

「垂直」または「水平」を選択します。

上記の 2 つのオプションを切り替えても、Vuforia Studio での方向は変わりません。変更内容を表示するには、エクスペリエンスのプレビューを表示する必要があります。

タブのパディング

tabpadding

string

タブとタブのコンテンツを格納するコンテナのパディングを設定します。以下に示すいずれかのサポートされている単位を使用して、数値を手動で入力します (例: 10px)。

• px

• %

• in

• mm

• cm

• ex

• em

• pt

• pc

別のタブコンテンツのパディングを設定する場合は、プロジェクトツリーでタブのコンテンツを個別に選択し、個々のパディングプロパティを編集することができます。

タブストリップのクラス

stripclass

string

タブのストリップまたはバーに対するクラスを指定します。

イベント	JavaScript	説明
タブクリック	clicktab	「タブクリック」イベントを、プロジェクトツリー内のモデルにドラッグします。定義式を入力するには、「タブクリック」イベントの横に表示されている「JS」アイコンをクリックします。

プロパティ	JavaScript	タイプ	説明
タイトル	title	string	タブに表示されるテキスト。

使用時に必要な最小ステップ

外観

1. 「タブ」ウィジェットをキャンバス上にドラッグアンドドロップします。

2. 「タブを追加」をクリックし、必要な数のタブを追加します。この例では、2 つのタブを追加します。

3. タブを選択し、表示するタブ名を「タイトル」フィールドに入力します。

4. そのタブに表示するウィジェットを「タブコンテンツ」と表示されている箇所にドラッグアンドドロップします。

CSS の例	外観
.ptc-tabs .tab-strip-item { font-size: 25px; }