1. ホーム
  2. 使い方 Blocs
  3. Brics
  4. タブ付きコンテンツブリック

タブ付きコンテンツブリック

タブ付きコンテンツブロックは、ナビゲーションタブでコンテンツが制御されるコンテンツエリアを提供します。他のほとんどの Brics 内で見つかりました Blocsタブ付きコンテンツ ブリックは、List Bric と Div Bric の 2 つの別個の部分で構成されています。タブ付きコンテンツ ブリックを構成する両方の要素には、連携して動作できるようにする重要なカスタム データ属性が含まれています。

タブを追加する

さらにタブを追加するには、レイヤーツリーからリストアイテムタブのXNUMXつを選択し、キーボードショートカットを使用して複製します。 ⌘D。 コンテンツを表示するために必要となるコンテンツ領域Divも複製するように注意してください。

コミュニケーション

タブ付きコンテンツ領域のリスト要素には、関連するタブコンテンツを表示するためにクリックされたタブリンクが表示されます。 これらの各リンクにはURLインタラクションセットがあり、このURLはたとえばIDを指します #nav-36725-content-3 およびという名前のカスタム属性 アリアコントロール たとえば、先頭に#がない一致するIDを持つ nav-36725-コンテンツ-3。 これらのIDは、カスタムデータ属性とも一致します アリアラベル付き、このタブリンクに関連するタブ付きコンテンツのDiv要素にあります。

タブコンテナdivaria-labelledbyカスタム属性

初心者向けのヒント

タブリンクURLの相互作用に変更を加えたり、タブ領域を追加しようとしている場合は、これらの変更をaria-controlsおよびaria-labelledbyカスタムデータ属性にも更新して、すべてが一致するようにしてください。

タブ付きコンテンツ領域の機能の詳細については、 ブートストラップ4ドキュメント.

3年2018月XNUMX日に更新

この記事は役に立ちましたか?

関連記事