本文へスキップ

ドキュメント

タブ

様々なスタイルのタブ付きナビゲーションを作成します。

使用方法

タブコンポーネントは、リスト内で横に並んだクリック可能なタブで構成されています。そのJavaScript機能はスイッチャーコンポーネントを拡張しており、タブ付きナビゲーションを使用して異なるコンテンツを動的に切り替えるために必要です。

クラス/属性 説明
uk-tab タブコンポーネントを定義するには、この属性を<ul>要素に追加します。リスト内で<a>要素をタブ項目として使用します。
.uk-active アクティブ状態を適用するには、このクラスをリスト項目に追加します。
.uk-disabled 無効状態を適用するには、このクラスをリスト項目に追加します。また、キーボードナビゲーションでアクセスできないように、アンカーからhref属性を削除します。 
<ul uk-tab>
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disabled"><a></a></li>
</ul>
  • <ul uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-disabled"><a>Disabled</a></li>
</ul>

下部修飾子

タブ項目を下部に反転するには、.uk-tab-bottomクラスを追加します。

<ul class="uk-tab-bottom" uk-tab>…</ul>
  • <ul class="uk-tab-bottom" uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

左/右修飾子

タブを垂直に左または右側に配置するには、.uk-tab-leftまたは.uk-tab-rightクラスを追加します。スペースを節約するために、ビューポート幅が960pxを下回ると、配置は自動的に水平に戻ります。

垂直配置を使用する場合は、通常、スイッチャーの例のようにレイアウトを適用するためにグリッドを作成します。

<ul class="uk-tab-left" uk-tab>…</ul>

<ul class="uk-tab-right" uk-tab>…</ul>
  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <ul class="uk-tab-left" uk-tab>
            <li class="uk-active"><a href="#">Left</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <div>
        <ul class="uk-tab-right" uk-tab>
            <li class="uk-active"><a href="#">Right</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

レスポンシブ

垂直配置と水平配置の間のデフォルトのブレークポイントを変更するには、適切なビューポート幅で属性にmediaオプションを適用します。ピクセル単位の数値（例：media: 640）またはブレークポイント（例：media: @m）を追加します。

<ul class="uk-tab-left" uk-tab="media: @s">…</ul>

配置

ナビゲーションの配置を変更するには、タブをフレックスコンポーネントまたは幅コンポーネントと組み合わせることができます。

<ul class="uk-flex-right" uk-tab>…</ul>
  • <div class="uk-margin-medium-top">
    <ul class="uk-flex-center" uk-tab>
        <li class="uk-active"><a href="#">Center</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="uk-flex-right" uk-tab>
        <li class="uk-active"><a href="#">Right</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="uk-child-width-expand" uk-tab>
        <li class="uk-active"><a href="#">Justify</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

タブとドロップダウン

タブを使用して、ドロップダウンコンポーネントからドロップダウンメニューをトリガーできます。

<ul uk-tab>
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">…</ul>
        </div>

    </li>
</ul>
  • <ul uk-tab>
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href>More <span uk-icon="icon: triangle-down"></span></a>
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </li>
</ul>

コンポーネントオプション

これらのオプションは、コンポーネント属性に適用できます。複数のオプションをセミコロンで区切ります。詳細はこちら

オプション 値 デフォルト 説明
connect CSSセレクタ false 関連するアイテムのコンテナ。デフォルトでは、これは 'uk-switcher' クラスの次の要素です。
toggle CSSセレクタ > * クリック時にコンテンツの切り替えをトリガーするトグルセレクタ。
active 数値 0 初期化時のアクティブなインデックス。負の数を指定すると、セットの最後から始まる位置を示します。
animation 文字列 false アニメーションのスペース区切りの名前。アニメーションアウトの場合はコンマ区切り。
duration 数値 200 アニメーションの期間。
swiping ブール値 true スワイプを使用します。
media 数値、文字列 960 水平モードに切り替えるタイミング - 整数としての幅（例：640）またはブレークポイント（例：@s、@m、@l、@xl）または有効なメディアクエリ（例：（min-width: 900px））。

JavaScript

JavaScriptコンポーネントの詳細をご覧ください。

初期化

UIkit.tab(element, options);

イベント

このコンポーネントがアタッチされた要素の接続されたアイテムで、次のイベントがトリガーされます。

名前 説明
beforeshow アイテムが表示される前に発生します。イベントでpreventDefault()を呼び出すことで、表示を阻止できます。
show アイテムが表示された後に発生します。
shown アイテムの表示アニメーションが完了した後に発生します。
beforehide アイテムが非表示になる前に発生します。イベントでpreventDefault()を呼び出すことで、非表示を阻止できます。
hide アイテムの非表示アニメーションが開始した後に発生します。
hidden アイテムが非表示になった後に発生します。

メソッド

コンポーネントには、次のメソッドを使用できます。

表示

UIkit.tab(element).show(index);

指定されたインデックスのタブ項目を表示します。

名前 型 デフォルト 説明
index 文字列、数値、ノード 0 表示するタブ項目。0ベースのインデックス。

アクセシビリティ

タブコンポーネントはタブWAI-ARIAデザインパターンに準拠し、適切なWAI-ARIAロール、状態、プロパティを自動的に設定します。

キーボード操作

タブナビゲーションは、次のキーを使用してキーボードからアクセスできます。

デフォルトでは、スイッチャーコンポーネントは手動アクティブ化動作を持っています。つまり、対応するコンテンツ項目はEnterキーまたはSpaceキーを使用してのみアクティブ化されます。自動アクティブ化に切り替えるには、follow-focusをtrueに設定します。タブ項目間を移動すると、対応するコンテンツ項目が自動的にアクティブになります。