メインコンテンツにスキップ

ドキュメント

トグル

トグルを使用して、さまざまなコンテンツの表示/非表示、切り替え、または外観の変更を行います。

使用方法

このコンポーネントを適用するには、`<button>` または `<a>` 要素に `uk-toggle="target: #ID"` 属性を追加するだけです。トグル属性では、任意のセレクターを使用できます。

トグルを使用して、アイテムにクラスまたは属性を追加または削除できます。デフォルトでは、`hidden` 属性を追加して要素を非表示にします。

<button uk-toggle="target: #my-id" type="button"></button>
<p id="my-id"></p>

  • どうしたの？

  • <div>
    <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-usage">Toggle</button>
    <p id="toggle-usage">What's up?</p>
</div>

複数のアイテム

複数のアイテムを同時に切り替えることもできます。 `uk-toggle` 属性に `target: SELECTOR` オプションを追加し、すべてのアイテムに適用されるセレクターを使用するだけです。

<button type="button" uk-toggle="target: .my-class"></button>
<p class="my-class"></p>
<p class="my-class"></p>

  • こんにちは！

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Toggle</button>
<p class="toggle">Hello!</p>
<p class="toggle" hidden>Bazinga!</p>

注意 この例では、アイテムの1つに `hidden` 属性を追加して、他のアイテムのみが表示されるようにしています。トグルは、両方の要素の表示状態を切り替えます。

カスタムクラス

`hidden` 属性を切り替えたくない場合は、カスタムクラスを切り替えることもできます。 `uk-toggle` 属性に `cls: CLASS` オプションを追加するだけです。この例では、`.uk-card-primary` クラスを使用して、異なるカードスタイルを切り替えています。

<button type="button" uk-toggle="target: #my-id; cls: uk-card-primary"></button>
<p id="my-id" class="uk-card uk-card-default"></p>
  • カスタムクラス
  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-custom; cls: uk-card-primary">Toggle</button>
<div id="toggle-custom" class="uk-card uk-card-default uk-card-body uk-margin-small">Custom class</div>

アニメーション

トグルコンポーネントを使用すると、アイテムを切り替えるときにアニメーションを追加できます。アニメーションコンポーネント から `uk-animation-*` クラスのいずれかをアニメーションパラメータに追加するだけです。クラスは、インアニメーションとアウトアニメーションの両方に適用されます。異なるアニメーションが必要な場合は、別のクラスを追加してください。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-fade"></button>
<p id="my-id"></p>
  • アニメーション
  • <button href="#toggle-animation" class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation; animation: uk-animation-fade">Toggle</button>
<div id="toggle-animation" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>

複数のアニメーション

アニメーションコンポーネント から複数のアニメーションを適用することもできます。こうすることで、異なるインアニメーションとアウトアニメーションを追加できます。

<button type="button" uk-toggle="target: #my-id; animation: uk-animation-slide-left, uk-animation-slide-bottom"></button>
<p id="my-id"></p>
  • アニメーション
  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation-multiple; animation:  uk-animation-slide-left, uk-animation-slide-bottom">Toggle</button>
<div id="toggle-animation-multiple" class="uk-card uk-card-default uk-card-body uk-margin-small">Animation</div>

キューイングされたアニメーション

アニメーションを使用して複数のアイテムを切り替える場合、2番目のアイテムをアニメーション化する前に、最初のアニメーションが実行されるまで待機したい場合があります。そのためには、`uk-toggle` 属性に `queued: true` オプションを追加するだけです。

<button type="button" uk-toggle="target: .my-class; animation: uk-animation-fade; queued: true"></button>
<p class="my-class"></p>
<p class="my-class"></p>

  • アニメーション

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle-animation-queued; animation: uk-animation-fade; queued: true; duration: 300">Toggle</button>
<p class="toggle-animation-queued uk-card uk-card-default uk-card-body uk-margin-small">Animation</p>
<p class="toggle-animation-queued uk-card uk-card-primary uk-card-body uk-margin-small" hidden>Animation</p>

モード

トグルはさまざまな方法でトリガーできます。 `uk-toggle` 属性に `mode` オプションを追加し、次のいずれかの値を適用するだけです。

値 説明
hover トグルはホバー時にトリガーされます。
click トグルはクリック時にトリガーされます。これはデフォルト値です。
click, hover トグルはクリック時とホバー時にトリガーされます。
media 切り替え動作はビューポートの幅によって異なります。詳細情報。 
<button type="button" uk-toggle="target: #my-id; mode: hover"></button>
<p id="my-id"></p>

  • どうしたの？

  • <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-hover; mode: hover">hover</button>
<p id="toggle-hover">What's up?</p>

メディア

`media` モードを使用する場合、可能な値のいずれかを持つ `media` オプションも追加する必要があります。たとえば、ピクセル単位の数字（例：640）またはブレークポイント（例：`@s`、`@m`、`@l`、`@xl`）を追加します。 `target` オプションがない場合、トグルは切り替えられた状態をそれ自体に適用します。つまり、表示されているビューポートの幅に応じて、`cls` オプションで定義されている異なる状態を切り替えます。

<!-- The primary modifier will only be applied on large screens -->

<div class="uk-card uk-card-default" uk-toggle="cls: uk-card-primary; mode: media; media: @l"></div>
  • 大画面ではプライマリ
  • <div class="uk-card uk-card-default uk-card-body uk-width-medium" uk-toggle="cls: uk-card-primary; mode: media; media: @l">
    Primary on large screens
</div>

注意 初期トグル状態は `cls` オプションによって異なります。スペース区切りリストで指定された最初のクラス、または `false` に設定されている場合は `hidden` 属性になります。複数のクラスが指定されている場合、他のクラスは状態変更時に切り替えられます。

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

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

オプション 値 デフォルト 説明
target 文字列 false 切り替える要素のCSSセレクター。
mode 文字列 click トリガー動作モードのカンマ区切りリスト。（`hover`、`click`、`media`）
`click` 文字列 false 切り替えられるクラス。デフォルトは `hidden` 属性です。
media 数値、文字列 false メディアモードでは、トグルをトリガーするブレークポイント - 整数としての幅（例：640）またはブレークポイント（例：`@s`、`@m`、`@l`、`@xl`）または任意の有効なメディアクエリ（例：（min-width：900px））。
animation 文字列 false アニメーション のスペース区切り名。アニメーションアウトの場合はカンマ区切り。
duration 数値 200 アニメーションの持続時間（ミリ秒）。
queued 真偽値 true ターゲットを連続して切り替えます。

`target` は *プライマリ* オプションであり、属性値にオプションが1つしかない場合は、そのキーを省略できます。

<span uk-toggle=".my-class"></span>

JavaScript

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

初期化

UIkit.toggle(element, options);

イベント

このコンポーネントがアタッチされている要素で、次のイベントがトリガーされます

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

メソッド

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

トグル

UIkit.toggle(element).toggle();

トグルのターゲットを切り替えます。

アクセシビリティ

`toggle()`