按鈕

使用 Bootstrap 的自訂 b-button 元件以進行表單、對話框和其他功能中的動作。其中包括支援大量版本的語境、尺寸和狀態。

概述

BootstrapVue 的 <b-button> 元件會產生一個 <button> 元素、<a> 元素，或 <router-link> 元件，並套用按鈕的樣式。

<div>
  <b-button>Button</b-button>
  <b-button variant="danger">Button</b-button>
  <b-button variant="success">Button</b-button>
  <b-button variant="outline-primary">Button</b-button>
</div>

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

元素類型

<b-button> 元件通常會呈現 <button> 元素。不過，你也可以透過提供 href 屬性值的方式來呈現 <a> 元素。你也可在提供 to 屬性值時產生 vue-router <router-link>（需要 vue-router）。

<div>
  <b-button>I am a Button</b-button>
  <b-button href="#">I am a Link</b-button>
</div>

<!-- b-button-types.vue -->

類型

你可以透過設定屬性 type 的值為 'button'、'submit' 或 'reset' 來指定按鈕的類型。預設類型是 'button'。

請注意，在設定 href 或 to 屬性時，type 屬性不會產生任何效果。

調整大小

想要較大或較小的按鈕？請透過 size 屬性指定 lg 或 sm。

<b-row>
  <b-col lg="4" class="pb-2"><b-button size="sm">Small Button</b-button></b-col>
  <b-col lg="4" class="pb-2"><b-button>Default Button</b-button></b-col>
  <b-col lg="4" class="pb-2"><b-button size="lg">Large Button</b-button></b-col>
</b-row>

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

語境變數

使用 變種 prop 來產生不同的 Bootstrap 情境按鈕變體。

預設 <b-button> 會使用 次要 變體。

變種 prop 會在顯示的按鈕上增加 Bootstrap v4.3 類別 .btn-<變體>。

實心顏色變體

主要、次要、成功、危險、警告、資訊、淺色 和 深色。

<div>
  <b-button variant="primary">Primary</b-button>
  <b-button variant="secondary">Secondary</b-button>
  <b-button variant="success">Success</b-button>
  <b-button variant="danger">Danger</b-button>
  <b-button variant="warning">Warning</b-button>
  <b-button variant="info">Info</b-button>
  <b-button variant="light">Light</b-button>
  <b-button variant="dark">Dark</b-button>
</div>

<!-- b-button-solid.vue -->

外框顏色變體

需要一個按鈕，但不是他們帶來的費力背景顏色？使用 外框-* 變體來移除任何 <b-button> 上的背景圖片和顏色。

外框-主要、外框-次要、外框-成功、外框-危險、外框-警告、外框-資訊、外框-淺色 和 外框-深色。

<div>
  <b-button variant="outline-primary">Primary</b-button>
  <b-button variant="outline-secondary">Secondary</b-button>
  <b-button variant="outline-success">Success</b-button>
  <b-button variant="outline-danger">Danger</b-button>
  <b-button variant="outline-warning">Warning</b-button>
  <b-button variant="outline-info">Info</b-button>
  <b-button variant="outline-light">Light</b-button>
  <b-button variant="outline-dark">Dark</b-button>
</div>

<!-- b-button-outline.vue -->

連結變體

變體 連結 將顯示一個看起來像是連結的按鈕，同時仍保持按鈕的預設內距和大小。

<div>
  <b-button variant="link">Link</b-button>
</div>

<!-- b-button-link.vue -->

提示：透過在 <b-button> 中加入 Bootstrap v4.3 utility 類別 text-decoration-none 來移除連結變體按鈕的滑鼠游標底線。

區塊層級按鈕

透過設定 區塊 prop，來建立區塊層級按鈕－這些按鈕會跨越父層的全部寬度。

<div>
  <b-button block variant="primary">Block Level Button</b-button>
</div>

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

藥丸樣式

偏好更圓角藥丸樣式的按鈕嗎？只要將 prop 藥丸 設定為 true 即可。

<div>
  <b-button pill>Button</b-button>
  <b-button pill variant="primary">Button</b-button>
  <b-button pill variant="outline-secondary">Button</b-button>
  <b-button pill variant="success">Button</b-button>
  <b-button pill variant="outline-danger">Button</b-button>
  <b-button pill variant="info">Button</b-button>
</div>

<!-- b-button-pill.vue -->

這個 prop 會在顯示的按鈕上增加 Bootstrap v4.3 utility 類別 .rounded-pill。

方形樣式

偏好角落更方正的按鈕樣式嗎？只要將 prop 方形 設定為 true 即可。

<div>
  <b-button squared>Button</b-button>
  <b-button squared variant="primary">Button</b-button>
  <b-button squared variant="outline-secondary">Button</b-button>
  <b-button squared variant="success">Button</b-button>
  <b-button squared variant="outline-danger">Button</b-button>
  <b-button squared variant="info">Button</b-button>
</div>

<!-- b-button-square.vue -->

方形 prop 會在顯示的按鈕上增加 Bootstrap v4.3 utility 類別 .rounded-0。 藥丸 prop 優先於 方形 prop。

禁用狀態

設定 禁用 prop 可禁用按鈕的預設功能。 禁用 也會作用於顯示為 <a> 元素和 <router-link>（例如，設定 href 或 to prop）的按鈕。

<div>
  <b-button disabled size="lg" variant="primary">Disabled</b-button>
  <b-button disabled size="lg">Also Disabled</b-button>
</div>

<!-- b-button-disabled.vue -->

按下狀態和切換

當 prop 按下 設定為 true 時，按鈕會顯示為按下狀態（較深的背景、較深的邊框和嵌入陰影）。

按下 prop 可以設定為三種值之一

true：設定 .active 類別並新增屬性 aria-pressed="true"。
false：清除 .active 類別並新增屬性 aria-pressed="false"。
null： (預設值) 樣式 .active 和屬性 aria-pressed 都將不會設置。

若要建立一個可在啟用與未啟用狀態之間切換的按鈕，可以在 pressed 屬性上使用 .sync 屬性修改器 (可用於 Vue 2.3+)。

<template>
  <div>
    <h5>Pressed and un-pressed state</h5>
    <b-button :pressed="true" variant="success">Always Pressed</b-button>
    <b-button :pressed="false" variant="success">Not Pressed</b-button>

    <h5 class="mt-3">Toggleable Button</h5>
    <b-button :pressed.sync="myToggle" variant="primary">Toggle Me</b-button>
    <p>Pressed State: <strong>{{ myToggle }}</strong></p>

    <h5>In a button group</h5>
    <b-button-group size="sm">
      <b-button
        v-for="(btn, idx) in buttons"
        :key="idx"
        :pressed.sync="btn.state"
        variant="primary"
      >
        {{ btn.caption }}
      </b-button>
    </b-button-group>
    <p>Pressed States: <strong>{{ btnStates }}</strong></p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myToggle: false,
        buttons: [
          { caption: 'Toggle 1', state: true },
          { caption: 'Toggle 2', state: false },
          { caption: 'Toggle 3', state: true },
          { caption: 'Toggle 4', state: false }
        ]
      }
    },
    computed: {
      btnStates() {
        return this.buttons.map(btn => btn.state)
      }
    }
  }
</script>

<!-- b-button-toggles.vue -->

如果為無線按鈕或勾選框樣式介面使用切換按鈕樣式，建議使用 <b-form-radio-group> 和 <b-form-checkbox-group> 內建的 button 樣式支援。

路由連結支援

有關各種支援的 <router-link> 相關屬性，請參閱 路由器支援 參考文件。

無障礙支援

當 href 屬性設定為 '#' 時，<b-button> 將會呈現連結 (<a>) 元素並設定屬性 role="button"，以及對應的 keydown 監聽器 (Enter 和 Space)，如此一來，連結對螢幕閱讀器和僅限鍵盤的使用者而言，就像原生 HTML <button> 一樣。當停用時，aria-disabled="true" 屬性將會設定在 <a> 元素上。

當 href 設定為任何其他值 (或使用 to 屬性時)，role="button" 將不會加入，也不會啟用鍵盤事件監聽器。

另請參閱

元件參考

`<b-button>`

功能型元件

檢視原始碼

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

元件別名

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

<b-btn>

注意：僅當匯入所有 BootstrapVue 或使用元件群組外掛時，才可用元件別名。

屬性

所有屬性預設值皆可在全域設定。

屬性 (按一下以遞增排序)	類型 (按一下以遞增排序)	預設值	說明
`active`	`布林值`	`false`	設定為 `true` 時，元件會處於啟用狀態並套用啟用樣式
`active-class`	`字串`		<router-link> 屬性：設定連結啟用時套用的 CSS 類別。一般而言，您會將此設定為類別名稱「active」
`append`	`布林值`	`false`	<router-link> 屬性：設定追加屬性，會將相對路徑不斷追加到目前的路徑
`block`	`布林值`	`false`	呈現 100% 寬度的按鈕 (延伸至其父容器寬度)
`disabled`	`布林值`	`false`	設為 `true` 時會停用元件的功能，並將其置於停用狀態
`exact`	`布林值`	`false`	<router-link> 屬性：預設的「目前」類別比對行為是包含式比對，設定此屬性會強制模式與路由完全比對
`exact-active-class`	`字串`		<router-link> 屬性：在連結透過完全比對啟用時，設定要套用的目前 CSS 類別。通常會將其設為類別名稱「active」
`exact-path`	`布林值`	`false`	<router-link> 屬性：允許僅使用 URL 的路徑區段進行比對，有效忽略查詢和雜湊區段
`exact-path-active-class`	`字串`		<router-link> 屬性：在連結透過完全路徑比對啟用時，設定要套用的目前 CSS 類別。通常會將其設為類別名稱「active」
`href`	`字串`		<b-link> 屬性：表示標準 a 連結的目標 URL
`no-prefetch`	`布林值`	`false`	<nuxt-link> 屬性：若要提升 Nuxt.js 應用程式的回應性，當連結將在視窗中顯示時，Nuxt.js 會自動預先擷取已分離代碼的頁面。設定 `no-prefetch` 會針對特定連結停用此功能
`pill`	`布林值`	`false`	設為 `true` 時會以圓形按鈕的樣式呈現
`prefetch` v2.15.0+	`布林值`	`null`	<nuxt-link> 屬性：若要提升 Nuxt.js 應用程式的回應性，當連結將在視窗中顯示時，Nuxt.js 會自動預先擷取已分離代碼的頁面。設定 `prefetch` 為 `true` 或 `false` 會覆寫 `router.prefetchLinks` 的預設值
`pressed`	`布林值`	`null`	設為 `true` 時會使按鈕看起來是按下的，並加入屬性 `aria-pressed="true"`，設為 `false` 時會加入屬性 `aria-pressed="false"`。三態屬性。可與 `sync` 修改子同步
`rel`	`字串`	`null`	<b-link> 屬性：設定已呈現連結上的 `rel` 屬性
`replace`	`布林值`	`false`	<router-link> 屬性：設定 replace 屬性會在按一下時呼叫 `router.replace()`，而不是 `router.push()`，因此導覽不會留下記錄
`router-component-name` v2.15.0+	`字串`		<b-link> 屬性：BootstrapVue 會自動偵測 `<router-link>` 和 `<nuxt-link>`。當您想要使用基於 `<router-link>` 的第三方連結元件時，請將此屬性設為元件名稱。例如，如果您使用 Gridsome，請將其設為 `g-link`（請注意，僅 `<router-link>` 特定的屬性會傳遞給元件）
`size`	`字串`		設定元件的外觀大小。「sm」、「md」（預設）或「lg」
`squared`	`布林值`	`false`	設為 `true` 時會以非圓角呈現按鈕
`tag`	`字串`	`'button'`	指定要呈現的 HTML 標籤，而非預設標籤
`target`	`字串`	`'_self'`	<b-link> 屬性：設定已呈現連結上的 `target` 屬性
`to`	`物件` 或 `字串`		<router-link> 屬性：表示連結的目標路由。按一下時，to 屬性的值會在內部傳遞給 `router.push()`，因此值可以是字串或位置描述符物件
`type`	`字串`	`'button'`	設定按鈕的 `type` 屬性值的內容。可以設定為 `button`、`submit` 或 `reset` 中的一項
`variant`	`字串`	`'secondary'`	套用 Bootstrap 主題色彩變異之一到元件上

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

插槽

名稱	說明
`default`	要放置在按鈕中的內容

事件

事件	引數	說明
`click`	原生 click 事件物件	按一下未停用的按鈕時觸發

`<b-button-close>`

功能型元件

檢視原始碼

<b-button-close> 成份別名
<b-button-close> 屬性
<b-button-close> 插槽
<b-button-close> 事件

元件別名

<b-button-close> 也可透過以下別名使用

<b-btn-close>

注意：僅當匯入所有 BootstrapVue 或使用元件群組外掛時，才可用元件別名。

屬性

所有屬性預設值皆可在全域設定。

屬性	類型	預設值	說明
`aria-label`	`字串`	`'Close'`	設定呈現地點'aria-label'屬性的值
`content` v2.3.0+	`字串`	`'×'`	關閉按鈕的內容
`disabled`	`布林值`	`false`	設為 `true` 時會停用元件的功能，並將其置於停用狀態
`text-variant`	`字串`		套用其中一個 Bootstrap 主題顏色變體至文字

插槽

名稱	說明
`default`	放在按鈕中的內容。覆蓋`content`屬性

事件

事件	引數	說明
`click`	原生 click 事件物件	按一下未停用的按鈕時觸發

導入個別元件

您可以透過以下命名匯出，將個別元件匯入專案中

元件	命名匯出	匯入路徑
`<b-button>`	`BButton`	`bootstrap-vue`
`<b-button-close>`	`BButtonClose`	`bootstrap-vue`

範例

import { BButton } from 'bootstrap-vue'
Vue.component('b-button', BButton)

將 Vue.js 外掛匯入

此外掛包括以上列出全部的個別元件. 外掛也包含任何元件別名。

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

範例

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