下拉式選單 | 組件 | BootstrapVue 元件庫

下拉式選單是可以切換的按一下顯示連結清單和動作的按鈕，格式為下拉式選單。

<b-dropdown>（或較簡稱的 <b-dd>）組件是可以切換的按一下顯示連結清單等的按鈕。它們是透過按一下（或將焦點放在上時按空格鍵或 Enter 鍵），而非將滑鼠移上去後切換的；這是有意的設計決定。

<div>
  <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Active action</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown.vue -->

按鈕內容

您可以使用 text 屬性（如先前範例所示），來自訂下拉式選單按鈕的文字，或使用 button-content 插槽，取代 text 屬性。透過 button-content 插槽，您可以在按鈕內容中使用基本的 HTML 和圖示。

如果屬性 text 和插槽 button-content 都存在，則插槽 button-content 優先。

<div>
  <b-dropdown text="Button text via Prop">
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>

  <b-dropdown>
    <template #button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>
    <b-dropdown-item href="#">An item</b-dropdown-item>
    <b-dropdown-item href="#">Another item</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-button-content.vue -->

定位

下拉選單支援各種定位，例如左右對齊，下拉和上拉，並支援當選單超過可見螢幕區域時自動翻轉（從下拉變成上拉，反之亦然）。

下拉選單可以左對齊（預設）或相對於上方按鈕右對齊。若要將下拉選單對齊在右側，請設定 right 屬性。

<div>
  <b-dropdown id="dropdown-left" text="Left align" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-right" right text="Right align" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-right.vue -->

上拉

透過設定 dropup 屬性，將下拉選單變成為上拉選單。

<div>
  <b-dropdown id="dropdown-dropup" dropup text="Drop-Up" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-dropup.vue -->

向右或向左下拉

透過設定 dropright 屬性，將下拉選單變成為向右下拉選單；或透過將 dropleft right 屬性設定為 true，將其變成為向左下拉選單。

dropright 優先於 dropleft。若設定了 dropup，則 dropright 或 dropleft 都不會產生任何效果。

<div>
  <b-dropdown id="dropdown-dropright" dropright text="Drop-Right" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-dropleft" dropleft text="Drop-Left" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-dropright-dropleft.vue -->

自動「翻轉」

預設情況下，下拉選單會根據其在視窗中的當前位置，翻轉到頂部或底部。若要停用此自動翻轉功能，請設定 no-flip 屬性。

想要將選單稍微從切換按鈕移開嗎？請使用 offset 屬性，指定從切換按鈕向右（或為負值時向左）推動多少像素。

指定為像素數：正值為向右移動，負值為向左移動。
以 CSS 單位（例如 0.3rem、4px、1.2em 等）指定距離，並作為字串傳遞。

<div>
  <b-dropdown id="dropdown-offset" offset="25" text="Offset Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-offset.vue -->

邊界約束

預設情況下，下拉選單在視覺上受到其捲動父項目的約束，這在大部分情況下已經足夠。但是，若您將下拉選單放置在設定了 overflow: scroll（或類似設定）的元素中，則下拉選單可能會在某些情況下被切斷。為了解決這個問題，您可以透過 boundary 屬性指定一個邊界元素。支援的值為 'scrollParent'（預設）、'viewport'、'window' 或 HTML 元素的參考。邊界值會直接傳遞到 Popper.js 的 boundariesElement 設定選項。

注意：當 boundary 是預設值 'scrollParent' 以外的任何值時，樣式 position: static 套用至下拉元件的 root 元素中，以便功能表能「跳出」其捲動容器。在某些情況下，這可能會影響你的下拉觸發器按鈕的配置或定位。在這些情況下，你可能需要將你的下拉式功能表包覆在另一個元素內。

進階 Popper.js 組態

如果你需要一些進階 Popper.js 組態，讓下拉式功能表符合你的需求，你可以使用 popper-opts 屬性傳遞自訂組態物件，它將與 BootstrapVue 預設值深度合併。

前往 Popper.js 文件查看所有組態選項。

注意：在覆寫 Popper.js 組態時，屬性 offset、boundary 和 no-flip 可能會失去效用。

區隔按鈕支援

建立一個區隔式下拉按鈕，其中的左側按鈕提供標準 click 事件和連結支援，而右側則是下拉功能表切換按鈕。

<div>
  <b-dropdown split text="Split Dropdown" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-split.vue -->

區隔按鈕連結支援

預設情況下，左側區隔按鈕為類型 <button> 的元素（確切來說是 <b-button>）。若要將此按鈕轉換為連結或 <router-link>，請透過 split-href 屬性指定 href 或經由 split-to 屬性指定路由連結 to 值，同時保持按鈕的外觀。

<div>
  <b-dropdown split split-href="#foo/bar" text="Split Link" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-split-link.vue -->

區隔按鈕類型

預設情況下，區隔按鈕的按鈕 type 為 'button'。你可以透過 split-button-type 屬性指定替代類型。支援的值為：'button'、'submit' 和 'reset'。

如果設定了屬性 split-to 或 split-href，split-button-type 屬性將會被忽略。

樣式選項

下拉式功能表支援各種屬性，用於設定下拉觸發器按鈕的樣式。

調整大小

下拉式功能表可配合所有尺寸的觸發器按鈕使用，包括預設和區隔式下拉按鈕。

將 size 屬性設定為 sm 以使用小型按鈕，或設定為 lg 以使用大型按鈕。

<div>
  <div>
    <b-dropdown size="lg" text="Large" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here</b-dropdown-item-button>
    </b-dropdown>

    <b-dropdown size="lg" split text="Large Split" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>
  </div>
  <div>
    <b-dropdown size="sm" text="Small" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>

    <b-dropdown size="sm" split text="Small Split" class="m-2">
      <b-dropdown-item-button>Action</b-dropdown-item-button>
      <b-dropdown-item-button>Another action</b-dropdown-item-button>
      <b-dropdown-item-button>Something else here...</b-dropdown-item-button>
    </b-dropdown>
  </div>
</div>

<!-- b-dropdown-sizes.vue -->

注意： 改變按鈕大小不會影響選單項目的大小！

下拉式選單的按鈕變換可以在設定 variant 屬性為 success、 primary、info、danger、link、outline-dark 等 Bootstrap 內建的標準情境變體（如果已定義，也可以使用自訂變體）。預設的變體為 secondary。

如需內建情境變體的完整清單，請參閱變體參考。

<div>
  <b-dropdown text="Primary" variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown text="Success" variant="success" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown text="Outline Danger" variant="outline-danger" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-variants.vue -->

您也可以透過 toggle-class 屬性將任意類別套用到切換按鈕。此屬性可以接受字串或字串陣列。

分裂式按鈕的顏色變體

預設情況下，左分裂式按鈕會使用與 toggle 按鈕相同的 variant。您可以透過 split-variant 屬性設定分裂式按鈕自己的變體。

<div>
  <b-dropdown
    split
    split-variant="outline-primary"
    variant="primary"
    text="Split Variant Dropdown"
    class="m-2"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-split-variant.vue -->

塊狀下拉式選單

預設情況下，下拉式選單會像按鈕一樣作用並以內嵌的方式顯示。如要建立塊狀下拉式選單（橫跨父層的完整寬度），請設定 block 屬性。支援一般下拉式選單和分裂式按鈕下拉式選單。

<div>
  <b-dropdown text="Block Level Dropdown" block variant="primary" class="m-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <b-dropdown
    text="Block Level Split Dropdown"
    block
    split
    split-variant="outline-primary"
    variant="primary"
    class="m-2"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-block.vue -->

如果您希望下拉式選單菜單也橫跨父層容器的完整寬度，請將 w-100 工具程式類別新增到 menu-class 屬性。

<div>
  <b-dropdown
    text="Block Level Dropdown Menu"
    block
    variant="primary"
    class="m-2"
    menu-class="w-100"
  >
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-block-menu.vue -->

許多支援的下拉式選單子元件提供 variant 屬性，用來控制其文字顏色。

隱藏插入符號

下拉式選單可以用 true 設定 no-caret 屬性值，讓切換按鈕的插入符號視覺上隱藏。這在下拉式選單要顯示為圖示時很有用。

<div>
  <b-dropdown size="lg"  variant="link" toggle-class="text-decoration-none" no-caret>
    <template #button-content>
      &#x1f50d;<span class="sr-only">Search</span>
    </template>
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>
</div>

<!-- b-dropdown-hidden-caret.vue -->

注意： 在使用 split 模式時，插入符號永遠會顯示。

預設上，<b-dropdown>即使在選單未顯示時也會在 DOM 中呈現選單內容。當同一網頁上呈現大量下拉選單時，會因為整體記憶體利用增加而影響效能。你可以透過把lazy prop 設定為 true，指示 <b-dropdown>只在顯示時才呈現選單內容。

下列元件可以放在你的下拉選單內。任何其他元件或標記都可能中斷版面配置及/或鍵盤導覽。

子元件	說明	別名
`<b-dropdown-item>`	提供點擊、連結及`<router-link>`/`<nuxt-link>`功能的動作項目。預設會呈現為`<a>`元素。	`<b-dd-item>`
`<b-dropdown-item-button>`	使用`<button>`元素來呈現一個選單項目的`<b-dropdown-item>`的替代方案。	`<b-dropdown-item-btn>`, `<b-dd-item-button>`, `<b-dd-item-btn>`
`<b-dropdown-divider>`	可以用來分隔下拉選單項目的分隔線/間隔。	`<b-dd-divider>`
`<b-dropdown-text>`	一個選單中的自由流動文字內容。	`<b-dd-text>`
`<b-dropdown-form>`	用於在下拉選單中放置表單控制項。	`<b-dd-form>`
`<b-dropdown-group>`	用於對下拉元件進行分組，並提供選項標頭。	`<b-dd-group>`
`<b-dropdown-header>`	一個標題項目，用於協助識別一組下拉選單項目。	`<b-dd-header>`

注意： 不支援巢狀子選單。

<b-dropdown-item>通常用於在選單中建立一個導覽連結。請使用href prop 或to prop（用於路由連結支援）來產生適當的導覽連結。如果沒有提供href或to，將會產生一個標準的<a>連結，其href為#（包含一個會防止預設連結動作的事件處理常式，以防止捲動到頂部）。

透過設定disabled prop，停用下拉選單項目。

在過去，下拉式功能表內容一定得是連結 (<b-dropdown-item>)，但這樣的情況在 Bootstrap v4 之後不再成立。現在您可以在下拉式功能表中，選擇性地透過 <b-dropdown-item-button> 子元件，建立 <button> 元素。 <b-dropdown-item-button> 不支援 href 或 to 屬性。

設定 disabled 屬性，即可停用下拉式功能表按鈕。

<div>
  <b-dropdown id="dropdown-buttons" text="Dropdown using buttons as menu items" class="m-2">
    <b-dropdown-item-button>I'm a button</b-dropdown-item-button>
    <b-dropdown-item-button active>I'm a active button</b-dropdown-item-button>
    <b-dropdown-item-button disabled>I'm a button, but disabled!</b-dropdown-item-button>
    <b-dropdown-item-button>I don't look like a button, but I am!</b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-item-button.vue -->

當功能表項目未觸發導航時，建議使用 <b-dropdown-item-button> 子元件。

使用 <b-dropdown-divider> 將相關的功能表項目分開。

<div>
  <b-dropdown id="dropdown-divider" text="Dropdown with divider" class="m-2">
    <b-dropdown-item-button>First item</b-dropdown-item-button>
    <b-dropdown-item-button>Second item</b-dropdown-item-button>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>Separated Item</b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-divider.vue -->

透過 <b-dropdown-text> 子元件，或使用文字和間距工具，在下拉式功能表中放置任何格式自由的文字。請注意，您可能需要額外的調整大小樣式，以限制/設定功能表寬度。

<div>
  <b-dropdown id="dropdown-text" text="Dropdown with text" class="m-2">
    <b-dropdown-text style="width: 240px;">
      Some example text that's free-flowing within the dropdown menu.
    </b-dropdown-text>
    <b-dropdown-text>And this is more example text.</b-dropdown-text>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>First item</b-dropdown-item-button>
    <b-dropdown-item-button>Second Item</b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-text.vue -->

<b-dropdown-text> 套用 BootstrapVue 自訂類別 .b-dropdown-text，該類別設定了一些在大部分狀況下都適用的基本樣式。預設情況下，其寬度會與最寬的 <b-dropdown-item> 內容相同。您可能需要在元件上放額外的樣式或輔助類別。

預設情況下，<b-dropdown-text> 使用標籤 <p> 進行呈現。您可以透過設定 <b-dropdown-text> 子元件的 tag 屬性為任何有效的 HTML5 標籤，來變更呈現標籤。

下拉式功能表支援基本表單。在下拉式功能表中放置一則 <b-dropdown-form>，並將表單控制項置於 <b-dropdown-form> 內。 <b-dropdown-form> 的基礎元件是 <b-form> 元件，並支援與一般表單相同的屬性和特徵。

<template>
  <div>
    <b-dropdown id="dropdown-form" text="Dropdown with form" ref="dropdown" class="m-2">
      <b-dropdown-form>
        <b-form-group label="Email" label-for="dropdown-form-email" @submit.stop.prevent>
          <b-form-input
            id="dropdown-form-email"
            size="sm"
            placeholder="email@example.com"
          ></b-form-input>
        </b-form-group>

        <b-form-group label="Password" label-for="dropdown-form-password">
          <b-form-input
            id="dropdown-form-password"
            type="password"
            size="sm"
            placeholder="Password"
          ></b-form-input>
        </b-form-group>

        <b-form-checkbox class="mb-3">Remember me</b-form-checkbox>
        <b-button variant="primary" size="sm" @click="onClick">Sign In</b-button>
      </b-dropdown-form>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button>New around here? Sign up</b-dropdown-item-button>
      <b-dropdown-item-button>Forgot Password?</b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

<script>
  export default {
    methods: {
      onClick() {
        // Close the menu and (by passing true) return focus to the toggle button
        this.$refs.dropdown.hide(true)
      }
    }
  }
</script>

<!-- b-dropdown-form.vue -->

<b-dropdown-form> 套用 BootstrapVue 自訂類別 .b-dropdown-form，該類別設定了一些在大部分狀況下都適用的基本樣式。預設情況下，其寬度會與最寬的 <b-dropdown-item> 內容相同。您可能需要在元件上放額外的樣式或輔助類別。

將一組下拉子元件與一個選用的關聯標題分組。將 <b-dropdown-divider> 放在 <b-dropdown-group> 與其他群組或非群組式下拉內容之間

<div>
  <b-dropdown id="dropdown-grouped" text="Dropdown with group" class="m-2">
    <b-dropdown-item-button>
      Non-grouped Item
    </b-dropdown-item-button>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-group id="dropdown-group-1" header="Group 1">
      <b-dropdown-item-button>First Grouped item</b-dropdown-item-button>
      <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button>
    </b-dropdown-group>
    <b-dropdown-group id="dropdown-group-2" header="Group 2">
      <b-dropdown-item-button>First Grouped item</b-dropdown-item-button>
      <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button>
    </b-dropdown-group>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item-button>
      Another Non-grouped Item
    </b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-group.vue -->

建議使用 <b-dropdown-group>，而不是 <b-dropdown-header>，來提供具有標題的可存取群組項目。

新增標題，將任何下拉式功能表中動作的區段標籤化。

<div>
  <b-dropdown id="dropdown-header" text="Dropdown with header" class="m-2">
    <b-dropdown-header id="dropdown-header-label">
      Dropdown header
    </b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-label">
      First item
    </b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-label">
      Second Item
    </b-dropdown-item-button>
  </b-dropdown>
</div>

<!-- b-dropdown-header.vue -->

請參閱下拉標題和可存取性部分，了解有關使標題更容易讓輔助技術使用者存取的詳細資料。

使用 <b-dropdown-group> 子元件，簡化建立有相關標題的可存取群組式下拉項目。

點選 <b-dropdown-form> 內部的按鈕，不會自動關閉選單。如果你需要使用按鈕 (或透過表單提交事件) 來關閉選單，請呼叫 <b-dropdown> 實體上的 hide() 方法，如上方的範例所示。

hide() 方法接受一個布林值引數。如果引數為 true，則在選單關閉後，焦點將會回到下拉切換按鈕。否則，文件將在選單關閉後得到焦點。

要追蹤任何下拉開啟，使用

export default {
  mounted() {
    this.$root.$on('bv::dropdown::show', bvEvent => {
      console.log('Dropdown is about to be shown', bvEvent)
    })
  }
}

有關事件的完整清單，請參閱文件中的事件部分。

選擇具有作用域的預設槽位

預設槽位選擇性地使用以下可用的作用域

屬性或方法	說明
`hide()`	可以用於關閉下拉選單。接受一個選用的布林值引數，如果為 `true` 則焦點會回到切換按鈕

可存取性

提供唯一的 id prop 能確保 ARIA 相容性，會在已呈現的標記中自動加入適當的 aria-* 屬性。

預設的 ARIA 角色設定為 menu，但你可以依據你的使用案例透過 role 屬性將這個預設值變更為其他角色（例如 navigation）。 role 屬性的值會用來決定切換按鈕的 aria-haspopup 屬性。

當一個選單項目不會觸發導覽時，建議使用 <b-dropdown-item-button> 子元件（不會宣布為連結）取代 <b-dropdown-item>（會對使用者呈現為連結）。

標題和易讀性

在下拉式選單中使用 <b-dropdown-header> 元件時，建議為每個標題新增 id 屬性，接著在該標題之下的每個下拉式項目上設定 aria-describedby 屬性（設定為關聯標題的 id 值）。這樣一來，輔助技術（例如視力受損使用者）的使用者就能獲得關於下拉式項目的額外內容。

<div>
  <b-dropdown id="dropdown-aria" text="Dropdown ARIA" variant="primary" class="m-2">
    <b-dropdown-header id="dropdown-header-1">Groups</b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-1">Add</b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-1">Delete</b-dropdown-item-button>

    <b-dropdown-header id="dropdown-header-2">Users</b-dropdown-header>
    <b-dropdown-item-button aria-describedby="dropdown-header-2">Add</b-dropdown-item-button>
    <b-dropdown-item-button aria-describedby="dropdown-header-2">Delete</b-dropdown-item-button>

    <b-dropdown-divider></b-dropdown-divider>

    <b-dropdown-item-button>
      Something <strong>not</strong> associated with Users
    </b-dropdown-item-button>

  </b-dropdown>
</div>

<!-- b-dropdown-aria.vue -->

作為較簡單的替代方案，使用 <b-dropdown-group> 可以輕鬆地讓標題文字與包含的下拉式子元件關聯。

下拉式選單支援鍵盤導覽，模擬原生 <select> 行為。

請注意，向下 和 向上 鍵不會將焦點移至 <b-dropdown-form> 子元件，但使用者仍可以使用 Tab 或 Shift+Tab 來移動至選單中的表單控制項。

實作備註

為了無障礙考量，下拉式選單以語意化的 <ul> 和 <li> 元素呈現。.dropdown-menu 是 <ul> 元素，而下拉式項目（項目、按鈕、文字、表單、標題和分隔線）則包裝在 <li> 元素中。如果你要建立自訂項目放入下拉式選單中，請務必以純文字 <li> 包裝。

另請參閱

<b-nav-item-dropdown>，用於 <b-nav> 和 <n-navbar> 中的下拉式選單支援
Router Link 支援中提有關 <b-dropdown-item> 可使用特定路由連結屬性的資訊

元件參考

檢視來源

<b-dropdown> 元件別名
<b-dropdown> 屬性
<b-dropdown> 插槽
<b-dropdown> 事件

<b-dropdown> 可透過下列別名使用

<b-dd>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性（按一下進行升序排序）	類型（按一下進行升序排序）	預設	說明
`block` v2.1.0+	`布林`	`false`	呈現寬度 100% 的切換按鈕（展開到其父容器的寬度）
`boundary`	`HTMLElement` 或 `String`	`'scrollParent'`	功能表邊界約束：「scrollParent」、「window」、「viewport」或參照 HTMLElement
`disabled`	`布林`	`false`	設為 `true` 時，會停用元件功能並使其呈現停用狀態
`dropleft`	`布林`	`false`	設定時，將功能表定位在按鈕左側
`dropright`	`布林`	`false`	設定時，將功能表定位在按鈕右側
`dropup`	`布林`	`false`	設定時，將功能表定位在按鈕上方
`html` 請小心使用	`字串`		要放在切換按鈕中的 HTML 字串，或是在分割模式中的分割按鈕
`id`	`字串`		用於設定已呈現內容上的 `id` 屬性，並用作在需要時產生任何其他元素 ID 的基礎
`lazy`	`布林`	`false`	設定時，僅在開啟功能表時才將功能表內容掛載至 DOM
`menu-class`	`陣列` 或 `物件` 或 `字串`		要新增至功能表容器的 CSS 類別（或類別）
`no-caret`	`布林`	`false`	隱藏切換按鈕上的插入記號指標
`no-flip`	`布林`	`false`	防止功能表自動調整位置
`offset`	`數字`或 `字串`	`0`	指定要將選單移動的像素數。支援負值
`popper-opts`	`物件`	`{}`	傳遞至 Popper.js 的其他組態
`right`	`布林`	`false`	將選單右邊緣與按鈕右邊對齊
`role`	`字串`	`'menu'`	將 ARIA 屬性 `role` 設定為某個特定值
`size`	`字串`		設定此元件顯示的大小。'sm'、'md'（預設）或 'lg'
`split`	`布林`	`false`	設定時，會呈現出分開的按鈕下拉式選單
`split-button-type`	`字串`	`'button'`	要置入分割按鈕的 'type' 屬性值的字串值：'button'、'submit'、'reset'
`split-class` v2.2.0+	`陣列` 或 `物件` 或 `字串`		要新增至分割按鈕的 CSS 類別（或類別）
`split-href`	`字串`		表示分割按鈕的連結目標網址
`split-to`	`物件`或 `字串`		<router-link> prop：表示分割按鈕的目標路由。按一下時，to prop 的值會在內部傳遞至 router.push()，所以值可能是字串或地點描述符物件
`split-variant`	`字串`		套用其中一個 Bootstrap 主題色彩變體至分割按鈕。預設為 'variant' prop 值
`text`	`字串`		要置入切換按鈕或置入分割按鈕的字串，且在分割模式中
`toggle-attrs` v2.22.0+	`物件`	`{}`	要套用至切換按鈕的其他屬性
`toggle-class`	`陣列` 或 `物件` 或 `字串`		要新增至切換按鈕的 CSS 類別（或類別）
`toggle-tag` 請小心使用	`字串`	`'button'`	指定要呈現的 HTML 標籤，來取代預設的標籤
`toggle-text`	`字串`	`'切換下拉式選單'`	ARIA 標籤（sr-only），當在分割模式時，要設定在切換上
`variant`	`字串`	`'secondary'`	套用其中一個 Bootstrap 主題色彩變異至此元件

<b-dropdown> 支援產生 <router-link> 或 <nuxt-link> 元件（如果使用 Nuxt.js）。如需路由連結（或 nuxt 連結）特定 prop 的更多詳細資訊，請參閱路由支援參考區段。

注意： 支援 HTML 字串的屬性 (*-html) 當傳遞原始使用者提供的值時，可能會對跨網站指令碼 (XSS) 攻擊造成影響。你必須先適當地清除使用者輸入值！

名稱	有範疇的	說明
`button-content`	否	可實作自訂文字、圖示以及更多樣式
`預設`		可選擇範圍的預設下拉式選單內容

事件	參數	說明
`bv::dropdown::hide`	`bvEvent` - BvEvent 物件。呼叫 bvEvent.preventDefault() 來取消隱藏	在下拉式選單隱藏前會在 $root 上發佈。可以取消
`bv::dropdown::show`	`bvEvent` - BvEvent 物件。呼叫 bvEvent.preventDefault() 來取消顯示	在下拉式選單顯示前會在 $root 上發佈。可以取消
`click`	`event` - 原生點擊事件物件	在分離模式下，分離按鈕按下時發佈
`hidden`		下拉式選單隱藏時發佈
`hide`	`bvEvent` - BvEvent 物件。呼叫 bvEvent.preventDefault() 來取消隱藏	下拉式選單隱藏前發佈。可以取消
`show`	`bvEvent` - BvEvent 物件。呼叫 bvEvent.preventDefault() 來取消顯示	下拉式選單顯示前發佈。可以取消
`shown`		下拉式選單顯示時發佈
`toggle`		切換按鈕按下時發佈

檢視來源

<b-dropdown-item> 組件別名
<b-dropdown-item> 屬性
<b-dropdown-item> 插槽
<b-dropdown-item> 事件

<b-dropdown-item> 也可以使用以下別名

<b-dd-item>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性（按一下進行升序排序）	類型（按一下進行升序排序）	預設	說明
`active`	`布林`	`false`	設為 `true`，元件會處於 active 狀態，並套用 active 樣式
`active-class`	`字串`		<router-link> 屬性：組態連結 active 時，套用的 CSS 類別。你通常會想要將此設定為類別名稱 'active'
`append`	`布林`	`false`	<router-link> 屬性：設定 append 屬性會將相對路徑追加到目前的路徑
`disabled`	`布林`	`false`	設為 `true` 時，會停用元件功能並使其呈現停用狀態
`exact`	`布林`	`false`	<router-link> 屬性：預設的 active 類別比對方式為包容性比對。設定此屬性會強制模式完全比對路徑
`exact-active-class`	`字串`		<router-link> 屬性：組態連結在完全比對 active 時，套用的 CSS 類別。你通常會想要將此設定為類別名稱 'active'
`exact-path`	`布林`	`false`	<router-link> prop: 允許僅使用 URL 的路徑區段進行比對，有效地忽略查詢和宣告雜湊的部分
`exact-path-active-class`	`字串`		<router-link> prop: 設定在連接使用 exact 路徑比對時套用的活動式 CSS 類別。您通常會想要將此設定為類別名稱「active」
`href`	`字串`		<b-link> prop: 表示標準 a 連接連結的目標 URL
`link-class` v2.9.0+	`陣列` 或 `物件` 或 `字串`		套用於內部連結元素的類別或類別
`no-prefetch`	`布林`	`false`	<nuxt-link> prop: 為了提升 Nuxt.js 應用程式的回應速度，Nuxt.js 會在連結出現在視窗中時自動預先擷取已拆分代碼的頁面。設定 `no-prefetch` 將會停用特定連結此一功能
`prefetch` v2.15.0+	`布林`	`null`	<nuxt-link> prop: 為了提升 Nuxt.js 應用程式的回應速度，Nuxt.js 會在連結出現在視窗中時自動預先擷取已拆分代碼的頁面。將 `prefetch` 設定為 `true` 或 `false` 會覆寫 `router.prefetchLinks` 的預設值
`rel`	`字串`	`null`	<b-link> prop: 設定輸出連結的 `rel` 屬性
`replace`	`布林`	`false`	<router-link> prop: 設定 replace prop 將在按一下時呼叫 `router.replace()`，而不是 `router.push()`，因此導覽不會留下瀏覽記錄
`router-component-name` v2.15.0+	`字串`		<b-link> prop: BootstrapVue 會自動在 `<router-link>` 和 `<nuxt-link>` 之間進行偵測。在個別狀況下，您需要使用基於 `<router-link>` 的第三方連結元件，請將此 prop 設定為元件名稱。例如，如果您使用 Gridsome，可設定為「g-link」（請注意，只有特定於 `<router-link>` 的 prop 會傳遞給元件）
`target`	`字串`	`'_self'`	<b-link> prop: 設定顯示連結的 `target` 屬性
`to`	`物件`或 `字串`		<router-link> prop: 表示連結的目標路徑。按一下時，to prop 的值會在內部傳遞給 `router.push()`，因此值可以是字串或位置描述物件
`variant`	`字串`		套用其中一個 Bootstrap 主題色彩變異至此元件

<b-dropdown-item> 支援產生 <router-link> 或 <nuxt-link> 元件（如果使用 Nuxt.js）。有關路由連結（或 nuxt 連結）特定 prop 的更多詳細資訊，請參閱路由支援參考區段。

名稱	說明
`預設`	要放置在dropdown 項目中的內容

事件	參數	說明
`click`	原生點擊事件物件	項目被點擊時發出

檢視來源

<b-dropdown-item-button> 組件別名
<b-dropdown-item-button> 屬性
<b-dropdown-item-button> 插槽
<b-dropdown-item-button> 事件

<b-dropdown-item-button> 還可以使用下列別名

<b-dropdown-item-btn>
<b-dd-item-button>
<b-dd-item-btn>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性	類型	預設	說明
`active`	`布林`	`false`	設為 `true`，元件會處於 active 狀態，並套用 active 樣式
`active-class`	`字串`	`'active'`	<router-link> 屬性：組態連結 active 時，套用的 CSS 類別。你通常會想要將此設定為類別名稱 'active'
`button-class` v2.9.0+	`陣列` 或 `物件` 或 `字串`		要套用至內部按鈕元素的類別或類別
`disabled`	`布林`	`false`	設為 `true` 時，會停用元件功能並使其呈現停用狀態
`variant`	`字串`		套用其中一個 Bootstrap 主題色彩變異至此元件

名稱	說明
`預設`	要放置在下拉式選單項目按鈕中的內容

事件	參數	說明
`click`	原生點擊事件物件	當按鈕項目被按一下時發出

函數性組件

檢視來源

<b-dropdown-divider> 組件別名
<b-dropdown-divider> 屬性

<b-dropdown-divider> 還可以使用下列別名

<b-dd-divider>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性	類型	預設	說明
`標籤`	`字串`	`'hr'`	指定要呈現的 HTML 標籤，來取代預設的標籤

函數性組件

檢視來源

<b-dropdown-form> 組件別名
<b-dropdown-form> 屬性
<b-dropdown-form> 插槽

<b-dropdown-form> 還可以使用下列別名

<b-dd-form>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性	類型	預設	說明
`disabled`	`布林`	`false`	設為 `true` 時，會停用元件功能並使其呈現停用狀態
`form-class` v2.2.0+	`陣列` 或 `物件` 或 `字串`		增加至表的 CSS 類別（或類別）
`id`	`字串`		用於設定已呈現內容上的 `id` 屬性，並用作在需要時產生任何其他元素 ID 的基礎
`內嵌`	`布林`	`false`	設定後，表單將會為內嵌模式，其標籤、表單控制項，以及按鈕將會顯示於同一水平行中
`novalidate`	`布林`	`false`	設定後，將禁用瀏覽器表單內控制項的 HTML5 原生驗證功能
`validated`	`布林`	`false`	設定後，將於表單中新增 Bootstrap 類別 'was-validated'，觸發瀏覽器原生驗證狀態

名稱	說明
`預設`	於下拉式表單置入的內容

函數性組件

檢視來源

<b-dropdown-text> 组件别名
<b-dropdown-text> 属性
<b-dropdown-text> 插槽

<b-dropdown-text> 也可透过以下别名使用

<b-dd-text>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性	類型	預設	說明
`標籤`	`字串`	`'p'`	指定要呈現的 HTML 標籤，來取代預設的標籤
`text-class`	`陣列` 或 `物件` 或 `字串`		应用于内部元素的类或类
`variant`	`字串`		套用其中一個 Bootstrap 主題色彩變異至此元件

名稱	說明
`預設`	于下拉文本置入的內容

函數性組件

檢視來源

<b-dropdown-group> 组件别名
<b-dropdown-group> 属性
<b-dropdown-group> 插槽

<b-dropdown-group> 也可透过以下别名使用

<b-dd-group>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性	類型	預設	說明
`aria-describedby`	`字串`		提供此组件其他内容的元素 ID。用作 `aria-describedby` 属性的值
`header`	`字串`		置于 header 中的文本内容
`header-classes`	`陣列` 或 `物件` 或 `字串`		增加至标头的 CSS 类别（或类类别）
`header-tag`	`字串`	`'header'`	指定要呈现的 HTML 标头，而不是默认标头的标号
`header-variant`	`字串`		将一个 Bootstrap 主题色变体套用至标题
`id`	`字串`		用於設定已呈現內容上的 `id` 屬性，並用作在需要時產生任何其他元素 ID 的基礎

名稱	說明
`預設`	置於下拉式選單群組中的內容（項目）
`header`	下拉式選單群組的標頭內容（選用）

函數性組件

檢視來源

<b-dropdown-header>元件別名
<b-dropdown-header>屬性
<b-dropdown-header>插槽

<b-dropdown-header>也可透過以下別名使用

<b-dd-header>

注意：只有在匯入所有 BootstrapVue 或使用元件群組外掛程式時，才可以獲得元件別名。

所有屬性的預設值都全局可設定。

屬性	類型	預設	說明
`id`	`字串`		用於設定已呈現內容上的 `id` 屬性，並用作在需要時產生任何其他元素 ID 的基礎
`標籤`	`字串`	`'header'`	指定要呈現的 HTML 標籤，來取代預設的標籤
`variant`	`字串`		套用其中一個 Bootstrap 主題色彩變異至此元件

名稱	說明
`預設`	置於下拉式選單標頭中的內容

匯入單元元件

你可以透過以下命名匯出，將單元元件匯入專案中

元件	命名匯出	匯入路徑
`<b-dropdown>`	`BDropdown`	`bootstrap-vue`
`<b-dropdown-item>`	`BDropdownItem`	`bootstrap-vue`
`<b-dropdown-item-button>`	`BDropdownItemButton`	`bootstrap-vue`
`<b-dropdown-divider>`	`BDropdownDivider`	`bootstrap-vue`
`<b-dropdown-form>`	`BDropdownForm`	`bootstrap-vue`
`<b-dropdown-text>`	`BDropdownText`	`bootstrap-vue`
`<b-dropdown-group>`	`BDropdownGroup`	`bootstrap-vue`
`<b-dropdown-header>`	`BDropdownHeader`	`bootstrap-vue`

範例

import { BDropdown } from 'bootstrap-vue'
Vue.component('b-dropdown', BDropdown)

作為 Vue.js 外掛程式匯入

這個外掛程式包含以上列出的所有單元元件. 外掛程式也包含任何元件別名。

命名匯出	匯入路徑
`DropdownPlugin`	`bootstrap-vue`

範例

import { DropdownPlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)

按鈕內容

定位

選單對齊

上拉

向右或向左下拉

自動「翻轉」

選單偏移

邊界約束

進階 Popper.js 組態

區隔按鈕支援

區隔按鈕連結支援

區隔按鈕類型

樣式選項

調整大小

分裂式按鈕的顏色變體

塊狀下拉式選單

隱藏插入符號

透過表單互動關閉選單

選擇具有作用域的預設槽位

可存取性

標題和易讀性

鍵盤導覽

實作備註

另請參閱

元件參考

匯入單元元件

作為 Vue.js 外掛程式匯入

按鈕內容

定位

選單對齊

上拉

向右或向左下拉

自動「翻轉」

選單偏移

邊界約束

進階 Popper.js 組態

區隔按鈕支援

區隔按鈕連結支援

區隔按鈕類型

樣式選項

調整大小

下拉式選單的顏色變體

分裂式按鈕的顏色變體

塊狀下拉式選單

下拉式選單子元件的顏色變體

隱藏插入符號

延遲載入下拉式選單

下拉選單支援的子元件

<b-dropdown-item>

<b-dropdown-item-button>

<b-dropdown-divider>

<b-dropdown-text>

<b-dropdown-form>

<b-dropdown-group>

<b-dropdown-header>

透過表單互動關閉選單

追蹤下拉變更透過 $root 事件

選擇具有作用域的預設槽位

可存取性

標題和易讀性

鍵盤導覽

實作備註

另請參閱

元件參考

元件別名

屬性

插槽

事件

組件別名

屬性

插槽

事件

組件別名

屬性

插槽

事件

組件別名

屬性

組件別名

屬性

插槽

组件别名

属性

插槽

组件别名

属性

插槽

元件別名

屬性

插槽

匯入單元元件

作為 Vue.js 外掛程式匯入

`<b-dropdown-item>`

`<b-dropdown-item-button>`

`<b-dropdown-divider>`

`<b-dropdown-text>`

`<b-dropdown-form>`

`<b-dropdown-group>`

`<b-dropdown-header>`