スイッチャー

異なるコンテンツペインを動的に切り替えます。

使用方法

スイッチャーコンポーネントは、複数のトグルとその関連するコンテンツ項目で構成されています。トグルを含むリスト要素にuk-switcher属性を追加します。コンテンツ項目を含む要素に.uk-switcherクラスを追加します。

デフォルトでは、.uk-switcherクラスを持つ要素は、スイッチャーが機能するためにはトグルの直後に配置する必要があります。グリッドを使用する場合など、別の要素にネストする必要がある場合は、uk-switcher属性にconnect: セレクターオプションを追加し、切り替え対象の項目を含む要素を選択します。

通常、スイッチャーのトグルは他のコンポーネントによってスタイル設定されます。そのいくつかをここで紹介します。

<!-- This is the nav containing the toggling elements -->
<ul uk-switcher>
    <li><a href="#"></a></li>
</ul>

<!-- This is the container of the content items -->
<ul class="uk-switcher">
    <li></li>
</ul>

この例では、サブナビゲーションコンポーネントを使用しています。

- 項目
- 項目
- 項目
- こんにちは！
- またまたこんにちは！
- バジンガ！

<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

場合によっては、アクティブなコンテンツ内から別のコンテンツセクションに切り替える必要があります。これは、uk-switcher-item属性を使用することで可能です。項目をターゲットにするには、属性を対応するコンテンツ項目の数に設定する必要があります。

属性をnextおよびpreviousに設定すると、隣接する項目に切り替わります。

<ul class="uk-switcher uk-margin">
    <li><a href="#" uk-switcher-item="0"></a></li>
    <li><a href="#" uk-switcher-item="1"></a></li>
    <li><a href="#" uk-switcher-item="next"></a></li>
    <li><a href="#" uk-switcher-item="previous"></a></li>
</ul>

- 項目
- 項目
- 項目
- こんにちは！項目3に切り替え
- またまたこんにちは！次の項目
- バジンガ！前の項目

<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>
<ul class="uk-switcher uk-margin">
    <li>Hello! <a href="#" uk-switcher-item="2">Switch to item 3</a></li>
    <li>Hello again! <a href="#" uk-switcher-item="next">Next item</a></li>
    <li>Bazinga! <a href="#" uk-switcher-item="previous">Previous item</a></li>
</ul>

複数のコンテナの接続

複数のコンテンツコンテナを接続することも可能です。uk-switcher属性にconnectパラメーターを追加し、すべての項目に適用されるセレクターを使用します。

<!-- This is the nav containing the toggling elements -->
<ul uk-switcher="connect: .my-class">…</ul>

<!-- These are the containers of the content items -->
<ul class="uk-switcher my-class">…</ul>

<ul class="uk-switcher my-class">…</ul>

コンテナ1
- こんにちは！
- またまたこんにちは！
- バジンガ！
コンテナ2
- こんにちは！最初の項目です。
- またまたこんにちは！2番目の項目です。
- バジンガ！3番目の項目です。

<ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: .switcher-container">
    <li><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<h4>Container 1</h4>

<ul class="uk-switcher switcher-container uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

<h4>Container 2</h4>

<ul class="uk-switcher switcher-container uk-margin">
    <li>Hello! The first item.</li>
    <li>Hello again! The second item.</li>
    <li>Bazinga! The third item.</li>
</ul>

アニメーション

アニメーションコンポーネントのすべてのアニメーションをスイッチャー項目に適用できます。そのためには、関連するクラスを含むanimationパラメーターをuk-switcher属性に追加します。

<ul uk-switcher="animation: uk-animation-fade">…</ul>

- 項目
- 項目
- 項目
- こんにちは！
- またまたこんにちは！
- バジンガ！

<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-fade">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

複数のアニメーション

アニメーションコンポーネントから複数のアニメーションを適用することもできます。これにより、異なる入出力アニメーションを追加できます。

<ul uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">…</ul>

- 項目
- 項目
- 項目
- こんにちは！
- またまたこんにちは！
- バジンガ！

<ul class="uk-subnav uk-subnav-pill" uk-switcher="animation: uk-animation-slide-left-medium, uk-animation-slide-right-medium">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

スイッチャーとサブナビゲーション

スイッチャーは、サブナビゲーションコンポーネントに簡単に適用できます。

<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher>…</ul>

<!-- This is the container of the content items -->
<ul class="uk-switcher"></ul>

- 項目
- 項目
- 項目
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

スイッチャーとタブ

例外として、タブ付きナビゲーションにuk-switcherの代わりにuk-tab属性を追加して、スイッチャーをタブコンポーネントと組み合わせます。

<!-- This is the subnav containing the toggling elements -->
<ul uk-tab>…</ul>

<!-- This is the container of the content items -->
<ul class="uk-switcher">…</ul>

- 項目
- 項目
- 項目
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

<ul uk-tab>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

垂直タブ

垂直タブ付きナビゲーションでコンテンツを正しく表示するには、グリッドコンポーネントと幅コンポーネントを使用します。

<div uk-grid>
    <div class="uk-width-auto">
        <ul class="uk-tab-left" uk-tab="connect: #my-id">…</ul>
    </div>
    <div class="uk-width-expand">
        <ul id="my-id" class="uk-switcher">…</ul>
    </div>
</div>

アクティブ

項目

項目
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.
アクティブ

項目

項目
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

<div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m">
                <ul class="uk-tab-left" uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <ul id="component-tab-left" class="uk-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div uk-grid>
            <div class="uk-width-auto@m uk-flex-last@m">
                <ul class="uk-tab-right" uk-tab="connect: #component-tab-right; animation: uk-animation-fade">
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="uk-width-expand@m">
                <ul id="component-tab-right" class="uk-switcher">
                    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
                    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

スイッチャーとボタン

スイッチャーは、ボタンコンポーネントのボタンまたはボタングループにも適用できます。ボタンのグループを囲むブロック、または.uk-button-groupクラスを持つ要素にスイッチャー属性を追加するだけです。

<!-- This is a switcher using a number of buttons -->
<div uk-switcher="toggle: > *">
    <button class="uk-button uk-button-default" type="button"></button>
    <button class="uk-button uk-button-default" type="button"></button>
</div>

<ul class="uk-switcher">…</ul>

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

<div uk-switcher="animation: uk-animation-fade; toggle: > *">
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
    <button class="uk-button uk-button-default" type="button">Item</button>
</div>

<ul class="uk-switcher uk-margin">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
</ul>

注記この例ではボタンをリスト項目にラップしていないため、コンテンツの切り替えをトリガーするクリック可能な要素は、toggleオプションを使用して変更する必要があります。

スイッチャーとナビゲーション

ナビゲーションコンポーネントにスイッチャーを適用するには、nav <ul>要素にuk-switcher属性を追加します。ナビゲーションとコンテンツをグリッドレイアウトで配置するには、グリッドコンポーネントと幅コンポーネントを使用します。

<div uk-grid>
    <div class="uk-width-small">
        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #my-id">…</ul>
    </div>
    <div class="uk-width-expand">
        <ul id="my-id" class="uk-switcher">…</ul>
    </div>
</div>

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.

<div uk-grid>
    <div class="uk-width-small@m">

        <ul class="uk-nav uk-nav-default" uk-switcher="connect: #component-nav; animation: uk-animation-fade">
            <li><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
    <div class="uk-width-expand@m">

        <ul id="component-nav" class="uk-switcher">
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, sed do eiusmod.</li>
        </ul>

    </div>
</div>

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

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

オプション	値	デフォルト	説明
`connect`	CSSセレクター	`~.uk-switcher`	関連アイテムコンテナ。デフォルトでは、'uk-switcher'クラスを持つ後続の要素。
`toggle`	CSSセレクター	`> * > :first-child`	コンテンツの切り替えをトリガーするクリック可能な要素を選択します。
`itemNav`	CSSセレクター	`false`	関連ナビゲーションコンテナ。デフォルトでは、ナビゲーション項目は関連アイテムコンテナ内でのみ検出されます。
`active`	数値	`0`	初期化時のアクティブなインデックス。負の数を指定すると、セットの最後から始まる位置を示します。
`animation`	文字列	`false`	アニメーションの名前をスペースで区切ったもの。アニメーションアウトの場合はカンマで区切ります。
`duration`	数値	`200`	アニメーションの期間。
`swiping`	ブール値	`true`	スワイプを使用します。
`followFocus`	ブール値	`false`	選択は自動的にフォーカスに従います。

connectは主要なオプションであり、属性値に1つのオプションしかない場合は、キーを省略できます。

<span uk-switcher=".switcher-container"></span>

JavaScript

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

初期化

UIkit.switcher(element, options);

イベント

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

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

メソッド

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

表示

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

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

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

アクセシビリティ

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

トグルナビゲーションにはtablistロールがあり、ナビゲーションコンポーネントの場合は、aria-orientation状態がverticalに設定されます。
トグルナビゲーション項目にはpresentationロールがあります。
トグルナビゲーションリンクにはID、tabロール、aria-selected状態、および対応するコンテンツ項目のIDに設定されたaria-controlsプロパティがあります。
コンテンツリストにはpresentationロールがあります。
コンテンツリスト項目にはID、tabpanelロール、および対応するトグル項目のIDに設定されたaria-labelledbyプロパティがあります。

キーボード操作

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

tabキーまたはshift+tabキーは、トグルナビゲーション内のアクティブなトグルにフォーカスを置きます。フォーカスが既にアクティブなトグルにある場合、フォーカスはトグルナビゲーション外の次の要素に移動します。
左/右矢印キーまたは上/下矢印キーは、向きに応じてトグル間を移動します。フォーカスが最後のトグルにある場合、最初のトグルに移動します。
enterキーまたはspaceキーは、フォーカスされたトグルに対応するコンテンツ項目をアクティブにします。
homeキーまたはendキーは、フォーカスを最初のトグルまたは最後のトグルに移動します。

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

ドキュメント