タブ ウィジェットは、<devsite-selector> カスタム要素を使用して、複数の表現によるコード例や、さまざまな形式（JSON、YAML、または XML）。
一般的な使用方法
次の例では、<devsite-selector> カスタム要素を使用し、HTML を使用して 3 つのタブをレンダリングしています。
タブ 1 タイトル
タブ 1 コンテンツ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
semper tortor nec dictum sagittis. Nunc massa ipsum、mollis non neque sed、vulputate dignissim odio。
タブ 2 タイトル
タブ 2 コンテンツ
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum、mollis non neque sed、vulputate dignissim odio。Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
タブ 3 タイトル
タブ 3 コンテンツ
Nunc massa ipsum、mollis non neque sed、vulputate dignissim odio。Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis.
次の例では、Markdown 構文を使用して同じ 3 つのタブをレンダリングしています。
タブ 1 タイトル
タブ 1 コンテンツ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper
tortor nec dictum sagittis. Nunc massa ipsum、mollis non neque sed、vulputate dignissim odio。
タブ 2 タイトル
タブ 2 コンテンツ
Curabitur semper tortor nec dictum sagittis. Nunc massa ipsum、mollis non-queque sed、vulputate dignissim odio。Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
タブ 3 タイトル
タブ 3 コンテンツ
Nunc massa ipsum、mollis non neque sed、vulputate dignissim odio. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper tortor
nec dictum sagittis.
オーバーフロー メニューのあるタブ ウィジェット
次の例では、<devsite-selector> カスタム要素を使用していますが、画面に収まらないタブが多すぎるため、[その他] プルダウン メニューに自動的にオーバーフローしています。
リンゴ
リンゴに関するコンテンツ
アンズ
アプリコットに関するコンテンツ
アボカド
アボカドに関するコンテンツ
いちじく
イチジクに関するコンテンツ
ブドウ
ブドウに関するコンテンツ
キウイフルーツ
キウイフルーツに関するコンテンツ
レモン
レモンに関するコンテンツ
ライム
ライムに関するコンテンツ
マンゴー
マンゴーに関するコンテンツ
桃
桃に関するコンテンツ
次の例では、Markdown 構文を使用して同じオーバーフロー メニューをレンダリングしています。
リンゴ
リンゴに関するコンテンツ
アンズ
アプリコットに関するコンテンツ
アボカド
アボカドに関するコンテンツ
いちじく
イチジクに関するコンテンツ
ブドウ
ブドウに関するコンテンツ
キウイフルーツ
キウイフルーツに関するコンテンツ
レモン
レモンに関するコンテンツ
ライム
ライムに関するコンテンツ
マンゴー
マンゴーに関するコンテンツ
桃
桃に関するコンテンツ
複数のタブウィジェットでタブ名が重複している
タブをクリックすると、同じ構文でテキストが同じ他のすべてのタブに影響します。たとえば、下のウィジェットで [Apple] または [Apricots] をクリックすると、どちらも前のセクションの 2 番目のウィジェットにも影響します。どちらも Markdown でビルドされているためです。
リンゴ
リンゴに関するコンテンツが増えました
アンズ
その他のアプリコットコンテンツ
タブ ウィジェットをカスタマイズする
タブウィジェットは Markdown で作成できますが、カスタム属性を割り当てるには HTML 構文を使用する必要があります。
タブ内でテキストを折り返す
DevSite によって設定されたタブの最大幅を超えるテキストは、切り捨てられて省略記号が追加されます。次の例では、<devsite-selector> カスタム要素内の two-line-tab クラスを使用して、2 番目のタブ内でテキストを折り返しています。
ラベルは長いため折り返しません
このラベルは他の行に折り返しません。
このラベルは 2 行目に折り返します
このタブのラベルは 2 行目に折り返されます。
小さなラベルでタブ内にテキストを折り返す
次の例では、two-line-tab を <devsite-selector> カスタム要素の 1 行目と tab-label に設定し、2 行のタブの 2 行目に小さいラベルを表示します。をご覧ください。
Swift
このタブには [Swift] ラベルが付いています。
Java
この 2 行タブには、[Java] ラベルの下に小さい [Android] ラベルがあります。
Kotlin
この 2 行タブには、[Kotlin] ラベルの下に小さい [Android] ラベルがあります。
Java
このタブには Java というラベルが付いています。
特定のタブへの直接リンク
次の例では、<devsite-selector> カスタム要素内で id を指定することで、特定のタブに直接リンクして開きます。
コボル
このタブはデフォルトでありますが、#cobol アンカーを使用してもかまいません。
Fortran
リンクに #fortran アンカーを追加して、このタブに直接リンクします。
Haskell
このタブでは、リンク内で #haskell アンカーを使用します。
すべてのウィジェットを同じタブで開くリンクの作成
次のリンクは、クエリ パラメータ ?tab=Apricots をこのページの URL に追加し、すべてのセレクタで [Apricots] タブを開いた状態でページを読み込みます。
https://www.devsitetest.how/integration-tests/widgets/tabs?tab=Apricots