詳細アイコン パネル・タブ

パネル・タブ・コンポーネントを使用して、一連のタブ・ペインとコンテンツを作成します。パネル・タブを追加すると、「Position」属性にaboveのデフォルト値が使用されます。これは、ペイン・コンテンツの上にのみタブが表示されることを意味します。「Position」に有効なその他の値は、belowおよびbothです。次の図に、「Position」属性がbothに設定されているパネル・タブ・コンポーネントを示します。

上下にタブがあるブラウザ・ページ

パネル・タブ内では、1つ以上の詳細アイテム表示コンポーネントを使用する必要があります。詳細アイテム表示内の1つ以上の子コンポーネントによって、タブ・ペインのコンテンツが構成されます。次に例を示します。

<af:panelTabbed position="both">
  <af:showDetailItem text="Tab 1">
    <af:outputText value="Pane contents here"/>  
  </af:showDetailItem>
  <af:showDetailItem text="Tab 2">
    <af:outputText value="Pane contents here"/>  
  </af:showDetailItem>
</af:panelTabbed>

各詳細アイテム表示コンポーネントは1つのタブに対応します。エンド・ユーザーがタブを選択すると、その詳細アイテム表示に属している子コンポーネントが表示されます。その他すべてのタブのコンテンツは表示されません。

パネル・タブは、パネル・ストレッチ・レイアウトなどの親のストレッチ・レイアウト・コンポーネントによってストレッチされます。パネル・ストレッチ・レイアウトのファセットに挿入された場合は、コンポーネントをストレッチするためにパネル・タブの幅と高さのプロパティを設定する必要はありません。

パネル・タブは子コンポーネントをストレッチしません。詳細アイテム表示は子コンポーネントをストレッチします。しかし、詳細アイテム表示によるストレッチを可能にするには、特定の条件を満たす必要があります。具体的には、次の条件があります。

詳細アイテム表示内でストレッチ可能なコンポーネントの例には、表やツリーがあります(前述の条件が満たされている場合)。

注意: パネル・タブとナビゲーション・ペインを混同しないでください。ナビゲーション・ペイン・コンポーネントは、ページ階層の単一レベルのナビゲーションを表す一連のナビゲーション・アイテム(タブを含む)を作成します。