ドロップ

他の要素を基準にして要素の位置を指定します。

ドロップコンポーネントは、マウスポインタを感知します。つまり、マウスポインタがドロップの方向に移動している限り、ドロップは開いたままになります。追加の遅延により、マウスポインタが短時間別の方向に移動した場合でも、ドロップは開いたままになります。別のメニュー項目にホバーすると、ドロップはすぐに閉じます。

使用方法

ボタンなどの任意のコンテンツで、ドロップコンポーネントを切り替えることができます。トグルの後に続くブロック要素に`uk-drop`属性を追加するだけです。

<button type="button"></button>
<div uk-drop></div>

トグルとドロップダウンをグループ化するには、それらをコンテナ要素でラップし、ユーティリティコンポーネントから`.uk-inline`クラスを追加します。

<div class="uk-inline">
    <button type="button"></button>
    <div uk-drop></div>
</div>

注記ドロップコンポーネントにはデフォルトのスタイルがありません。この例では、視覚化のためにカードコンポーネントのカードを使用しています。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover, Click</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

モード

デフォルトでは、ドロップはホバーとクリックで切り替わります。`mode`オプションを設定して、トグル動作を変更します。

モード	説明
`click,hover`	クリックとホバーでドロップを切り替えます。
`click`	クリックのみでドロップを切り替えます。
`hover`	ホバーのみでドロップを切り替えます。

<div uk-drop="mode: click"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

親アイコン

`<span>`要素に`uk-drop-parent-icon`属性を追加するだけで、親アイコンを作成できます。

<button type="button">Parent <span uk-drop-parent-icon></span></button>
<div uk-drop="mode: click"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Parent <span uk-drop-parent-icon></span></button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

幅とグリッド

グリッドコンポーネントをドロップ内に配置できます。コンテンツを`<div>`要素でラップし、`uk-grid`属性を追加します。ドロップがコンテナに収まらなくなったときにグリッドが自動的にスタックするようにするには、`.uk-drop-grid`クラスを追加します。

<div class="uk-width-large" uk-drop>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>…</div>
</div>

幅コンポーネントのクラスのいずれかを使用して、ドロップの幅を調整します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-card uk-card-body uk-card-default uk-width-large" uk-drop>
    <div class="uk-drop-grid uk-child-width-1-2@m" uk-grid>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </div>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
        </div>
    </div>
</div>

位置

デフォルトでは、ドロップはトグルの下に配置されます。位置を変更するには、`pos`オプションを`uk-drop`属性に設定します。値の最初の部分は、ドロップが配置される側を示し、2番目の部分はトグルに対するアライメントを定義します。

位置	説明
`top-left`	ドロップをトグルの上に配置し、左側に揃えます。
`top-center`	ドロップをトグルの上に配置し、中央に揃えます。
`top-right`	ドロップをトグルの上に配置し、右側に揃えます。
`bottom-left`	ドロップをトグルの下に配置し、左側に揃えます。
`bottom-center`	ドロップをトグルの下に配置し、中央に揃えます。
`bottom-right`	ドロップをトグルの下に配置し、右側に揃えます。
`left-top`	ドロップをトグルの左側に配置し、上側に揃えます。
`left-center`	ドロップをトグルの左側に配置し、中央に揃えます。
`left-bottom`	ドロップをトグルの左側に配置し、下側に揃えます。
`right-top`	ドロップをトグルの右側に配置し、上側に揃えます。
`right-center`	ドロップをトグルの右側に配置し、中央に揃えます。
`right-bottom`	ドロップをトグルの右側に配置し、下側に揃えます。

<div uk-drop="pos: top-left"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Top Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: top-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Center</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Top</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: right-top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

デフォルトでは、ドロップはビューポートまたはその他の親スクロール祖先を超えた場合に自動的に位置を変更します。トグルを覆うのを防ぐために反対側に位置を反転し、ビューポートに収まるようにアライメントをシフトします。スクロール祖先以外の境界を設定するには、境界のセレクタを使用して`boundary: SELECTOR`オプションを`uk-drop`属性に追加します。片方の軸のみに境界を設定するには、`boundary-x: SELECTOR`または`boundary-y: SELECTOR`を使用します。

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="boundary: !.my-class"></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; boundary: !.boundary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

シフトと反転

自動シフトと反転を無効にするには、`shift: false`または`flip: false`オプションを`uk-drop`属性に追加します。

<div uk-drop="shift: false; flip: false"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="boundary uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; boundary: !.boundary; shift: false; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; boundary: !.boundary; shift: false; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

自動更新

デフォルトでは、スクロール時にドロップの位置が再設定されます。動的な配置を無効にするには、`auto-update: false`オプションを`uk-drop`属性に追加します。ドロップは開かれたときにのみ一度配置されます。

<div uk-drop="auto-update: false"></div>

ターゲット

デフォルトでは、ドロップはトグルに配置されます。ドロップを別の要素に配置するには、`target: SELECTOR`オプションを`uk-drop`属性に追加します。ドロップが配置される側または別の要素へのアライメントのみを変更するには、`target-x: SELECTOR`または`target-y: SELECTOR`を使用します。

<div class="my-class">
    <button type="button"></button>
    <div uk-drop="target: !.my-class"></div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="target uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; target: !.target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; target: !.target">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

インセット

デフォルトでは、ドロップはトグルの外側に配置されます。位置を内側に変更するには、`inset: true`オプションを`uk-drop`属性に追加します。このオプションは、ドロップがトグルを覆わないように`target`オプションも設定されている場合にのみ使用してください。

<div uk-drop="target: .my-class; inset: true"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="target uk-panel uk-placeholder uk-height-medium">

    <button class="uk-button uk-button-default uk-float-left" type="button">Bottom Left</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-left; target: !.target; inset: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Bottom Right</button>
    <div class="uk-card uk-card-body uk-card-default" uk-drop="pos: bottom-right; target: !.target; inset: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

</div>

ストレッチ

ドロップを最も近いスクロール祖先のサイズに合わせてストレッチするには、`stretch: true`オプションを`uk-drop`属性に追加します。片方の軸のみにストレッチするには、`stretch: x`または`stretch: y`を使用します。`boundary`オプションが設定されている場合、ドロップは定義された境界までストレッチします。

<div uk-drop="stretch: true"></div>

- ホバー
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li>
                <a href>Hover</a>
                <div class="uk-navbar-dropdown" uk-drop="boundary: !.uk-navbar; stretch: x; flip: false">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
            </li>
        </ul>

    </div>
</nav>

アニメーション

アニメーションコンポーネントのクラスのいずれかを使用して`animation: uk-animation-*`オプションを追加することで、ドロップダウンに1つ以上のアニメーションを適用できます。アニメーションの持続時間も決定できます。`duration`オプションにミリ秒単位の値を追加するだけです。`animate-out: true`を設定すると、ドロップを閉じるときにもアニメーションが表示されます。

<div uk-drop="animation: uk-animation-slide-top-small; duration: 1000"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-card uk-card-body uk-card-default" uk-drop="animation: uk-animation-slide-top-small; animate-out: true">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

あるいは、ドロップコンポーネントには、アニメーションコンポーネントではカバーされていない、さらに2種類のアニメーションタイプがあります。`slide-*`アニメーションは、選択した方向からドロップとそのコンテンツをスライドさせ、`reveal-*`アニメーションでは、ドロップのコンテンツは静的のままで、選択した方向から表示されます。

アニメーション	説明
`slide-top`	ドロップを上からスライドさせます。
`slide-bottom`	ドロップを下からスライドさせます。
`slide-left`	ドロップを左からスライドさせます。
`slide-right`	ドロップを右からスライドさせます。
`reveal-top`	ドロップを上から表示します。
`reveal-bottom`	ドロップを下から表示します。
`reveal-left`	ドロップを左から表示します。
`reveal-right`	ドロップを右から表示します。

<div uk-drop="animation: slide-top; animate-out: true"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-margin" uk-margin>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Top</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Top</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Slide Left</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Reveal Left</button>
        <div class="uk-card uk-card-body uk-card-default" uk-drop="animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
    </div>

</div>

オフセット

ドロップとそのトグル間のカスタムオフセットを定義するには、ピクセル単位の値で`offset`オプションを追加します。

<div uk-drop="offset: 80"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-card uk-card-body uk-card-default" uk-drop="offset: 80">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>

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

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

オプション	値	デフォルト	説明
`toggle`	CSSセレクタ	`- *`	トグルとして使用する要素のCSSセレクタ。デフォルトでは、前の要素です。
`pos`	文字列	`bottom-left`	ドロップの位置。
`stretch`	ブール値、文字列	`false`	両方の軸(true)または指定した軸(`x`、`y`)でドロップをストレッチします。
`mode`	文字列	`click, hover`	ドロップのトリガー動作モードのコンマ区切りリスト(`click`、`hover`)。
`delay-show`	数値	`0`	ホバーモードでドロップが表示されるまでの遅延時間(ms)。
`delay-hide`	数値	`800`	ホバーモードでドロップが非表示になるまでの遅延時間(ms)。
`auto-update`	ブール値	`true`	このオプションを`false`に設定することで、スクロール中の動的な配置を無効にします。
`boundary`	CSSセレクタ	`false`	ドロップが反転してシフトするのを防ぐ領域。デフォルトでは、最も近いスクロール祖先です。
`boundary-x`	CSSセレクタ	`false`	ドロップが反転してシフトするのを防ぐx軸上の領域。
`boundary-y`	CSSセレクタ	`false`	ドロップが反転してシフトするのを防ぐy軸上の領域。
`target`	ブール値、CSSセレクタ	`false`	ドロップが配置される要素(ウィンドウの場合は`true`)。
`target-x`	ブール値、CSSセレクタ	`false`	ドロップが配置される要素のX軸(ウィンドウの場合は`true`)。
`target-y`	ブール値、CSSセレクタ	`false`	ドロップが配置される要素のY軸(ウィンドウの場合は`true`)。
`inset`	ブール値	`false`	ターゲットの内側に配置します。
`flip`	ブール値	`true`	境界を超えた場合、ドロップを主軸に沿って反転します。
`shift`	ブール値	`true`	境界を超えた場合、ドロップを横軸に沿ってシフトします。
`offset`	数値	`0`	ドロップのオフセット。
`animation`	文字列	`uk-animation-fade`	アニメーションの名前をスペースで区切ります。アニメーションアウトの場合はコンマで区切ります。
`animate-out`	ブール値	`false`	ドロップを閉じるときにアニメーションを使用します。
`bg-scroll`	ブール値	`true`	ドロップが開いている間に背景のスクロールを許可します。
`close-on-scroll`	ブール値	`false`	親スクロールコンテナのスクロール時にドロップダウンを閉じます。
`duration（持続時間）`	数値	`200`	アニメーションの持続時間。
`container（コンテナ）`	ブール値	`false`	セレクタを使用してターゲットコンテナを定義し、DOM内のドロップダウンの追加場所を指定します。

posは主要なオプションであり、属性値内の唯一のオプションの場合はキーを省略できます。

<span uk-drop="top-left"></span>

JavaScript

JavaScriptコンポーネントの詳細については、こちらをご覧ください。

初期化

UIkit.drop(element, options);

イベント

このコンポーネントがアタッチされた要素で、次のイベントが発生します。

名前	説明
`toggle`	アイテムの切り替え前に発生します。
`beforeshow`	アイテムが表示される前に発生します。イベントで`preventDefault()`を呼び出すことで、表示をキャンセルできます。
`show`	アイテムが表示された後に発生します。
`shown`	アイテムの表示アニメーションが完了した後に発生します。
`beforehide`	アイテムが非表示になる前に発生します。イベントで`preventDefault()`を呼び出すことで、非表示をキャンセルできます。
`hide`	アイテムが非表示になる前に発生します。
`hidden`	アイテムが非表示になった後に発生します。
`stack`	`drop-stack`クラスが適用されたときに発生します。

メソッド

このコンポーネントで使用できるメソッドを以下に示します。

Show（表示）

UIkit.drop(element).show();

ドロップダウンを表示します。

Hide（非表示）

UIkit.drop(element).hide(delay);

ドロップダウンを非表示にします。

名前	タイプ	デフォルト	説明
`delay（遅延）`	ブール値	true	ドロップダウンの非表示を遅らせます。

アクセシビリティ

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

トグルには、buttonロール、aria-expanded状態、aria-haspopupプロパティがあります。

キーボード操作

Dropコンポーネントは、次のキーを使用してキーボードからアクセスできます。

EnterキーまたはSpaceキーで、ドロップダウンを開閉します。
Escキーで、フォーカスが別の要素に移動した場合でも、ドロップダウンを閉じます。

ドキュメント

ドロップ