tabbedPanel - タブ付きパネル

他のコントロールとテキストのコンテナの集まりとして機能します。

カテゴリ

コンテナコントロール

構文

<xp:tabbedPanel attributes>
	<xp:tabPanel attributes>content</xp:tabPanel></xp:tabbedPanel>
	...
</xp:tabbedPanel>
表 1. 必須プロパティ
プロパティ 説明
id (tabbedPanel) デフォルトは tabbedPanel1、tabbedPanel2 などです。

(tabPanel) デフォルトは tabPanel1、tabPanel2 などです。
selectedTab (tabbedPanel) 初期状態でタブ付きパネルをこのタブに 開きます。
text (tabPanel) タブにラベルを指定します。
表 2. すべてのプロパティ (tabbedPanel)
カテゴリ プロパティ
アクセシビリティ role、title
注: この role プロパティは 9.0.1 から廃止されています。デフォルトでは、適切な準拠値が生成されます。アクセシビリティ標準に準拠するには、このプロパティに値を指定しないでください。
basics attrs、binding、dir、id、lang、loaded、rendered、rendererType、selectedTab
styling containerStyleClass、disableTheme、outerStyleClass、style、styleClass、themeId
表 3. すべてのプロパティ (tabPanel)
カテゴリ プロパティ
アクセシビリティ imageAlt、role、title
注: この role プロパティは 9.0.1 から廃止されています。デフォルトでは、適切な準拠値が生成されます。アクセシビリティ標準に準拠するには、このプロパティに値を指定しないでください。
basics binding、dir、href、id、image、label、lang、loaded、rendered、rendererType
イベント onClick
styling contentStyleClass、disableTheme、endTabStyleClass、middleTabStyleClass、selectedTabStyleClass、startTabStyleClass、style、styleClass、themeId、unselectedTabStyleClass

使用法

実行時に、選択されたタブパネルのコンテンツがページに 表示されます。 その他のタブも表示されますが、コンテンツは表示 されません。 ユーザーは、タブを選択してパネルを切り替えます。
設計モードで、タブ付きパネルをフォーカスすると、 tabbedPanel 要素が選択されます。 tabPanel 要素を扱うには、右クリックするか、メニューを使用して、 以下を行います。
  • [アクティブなタブコンテンツの選択] は、フォーカスされているタブの tabPanel 要素をフォーカスします。
  • [アクティブタブの削除] は、フォーカスされているタブの tabPanel 要素を削除します。
  • [タブを挿入] は、新規の tabPanel 要素を挿入します。
  • [タブの追加] は、新規の tabPanel 要素を追加します。

例

下のタブ付きパネルコントロールには、2 つのパネルがあります。
<xp:tabbedPanel id="tabbedPanel1" selectedTab="tabPanel1">
	<xp:tabPanel id="tabPanel1" label="Day">
		<xp:inputText id="inputText2"
			value="#{document1.phoneday}">
		</xp:inputText>
	</xp:tabPanel>
	<xp:tabPanel label="Night" id="tabPanel2">
		<xp:inputText id="inputText3"
			value="#{document1.phonenight}">
		</xp:inputText>
	</xp:tabPanel>
</xp:tabbedPanel>
親トピック: コントロールの参照