下拉選單

相對於另一個元素定位任何元素。

Drop 元件具有感知目標的功能。這表示只要滑鼠指標朝向下拉選單移動，下拉選單就會保持開啟。額外的延遲時間可確保即使滑鼠指標短暫地朝另一個方向移動，下拉選單仍會保持開啟。如果滑鼠懸停在另一個選單項目上，下拉選單會立即關閉。

用法

任何內容（例如按鈕）都可以切換下拉選單元件。只要在切換按鈕後的區塊元素新增 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>

注意 Drop 元件沒有預設樣式。在此範例中，我們使用來自卡片元件的卡片進行視覺化。

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.

<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.

<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 屬性。值的首部分是指下拉選單定位的側邊，而第二部分則定義其相對於切換按鈕的對齊方式。

位置	說明
`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.

<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>

預設情況下，如果下拉選單超出視窗或任何其他父捲動祖先元素，則會自動變更其位置。它會將其位置翻轉到另一側，以防止它覆蓋切換按鈕，並移動其對齊方式以符合視窗。若要設定與捲動祖先不同的邊界，只需在 uk-drop 屬性中使用邊界的選取器，新增 boundary: SELECTOR 選項即可。若要僅在一個軸上設定邊界，請使用 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.

<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>

移動和翻轉

若要停用自動移動和翻轉，請在 uk-drop 屬性中新增 shift: false 或 flip: false 選項。

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

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>

自動更新

預設情況下，下拉選單會在捲動時重新定位。若要停用動態定位，請在 uk-drop 屬性中新增 auto-update: false 選項。下拉選單只會在開啟時定位一次。

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

目標

預設情況下，下拉選單會與其切換按鈕對齊。若要將下拉選單定位到不同的元素，只需在 uk-drop 屬性中新增 target: SELECTOR 選項。若要僅變更下拉選單定位的側邊或與另一個元素的對齊方式，請使用 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.

<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>

內縮

預設情況下，下拉選單會定位在切換按鈕外側。若要將位置變更為內側，請在 uk-drop 屬性中新增 inset: true 選項。只有在也設定 target 選項時，才應該使用此選項，這樣下拉選單才不會覆蓋其切換按鈕。

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

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>

延展

若要延展下拉選單以填滿其最近的捲動祖先元素的大小，請在 uk-drop 屬性中新增 stretch: true 選項。若要僅延展至一個軸，請使用 stretch: x 或 stretch: y。如果設定 boundary 選項，下拉選單會延展至定義的邊界。

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

<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-* 選項與來自動畫元件的其中一個類別，將一個或多個動畫套用至下拉選單。您也可以判斷動畫的持續時間。只需新增具有毫秒值的 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>

或者，Drop 元件還有兩種動畫類型，不包含在動畫元件中。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.

<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`	在滑鼠懸停模式中，顯示下拉選單之前的延遲時間 (以毫秒為單位)。
`delay-hide`	數字	`800`	在滑鼠懸停模式中，隱藏下拉選單之前的延遲時間 (以毫秒為單位)。
`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` 類別時觸發。

方法

以下方法可用於元件

顯示

UIkit.drop(element).show();

顯示下拉選單。

隱藏

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

隱藏下拉選單。

名稱	類型	預設	說明
`delay`	布林值	true	延遲隱藏下拉選單。

無障礙輔助功能

「下拉選單」元件遵循選單按鈕 WAI-ARIA 設計模式，並自動設定適當的 WAI-ARIA 角色、狀態和屬性。

切換鈕 具有 button 角色、aria-expanded 狀態和 aria-haspopup 屬性。

鍵盤互動

可以使用以下按鍵透過鍵盤操作「下拉選單」元件。

按下 enter 或 space 鍵可以開啟和關閉下拉選單。
即使焦點已移至其他元素，按下 esc 鍵仍會關閉下拉選單。

文件

下拉選單