ボタン

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

コンテキストバリアント

variantプロパティを使用して、さまざまなBootstrapのコンテキストボタンバリアントを生成します。

デフォルトでは、<b-button>はsecondaryバリアントでレンダリングされます。

variantプロパティは、レンダリングされたボタンにBootstrap v4.3クラス.btn-<variant>を追加します。

ソリッドカラーバリアント

primary、secondary、success、danger、warning、info、light、およびdark。

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

アウトラインカラーバリアント

ボタンは必要だが、背景色が大きくない方が良い場合は、outline-*バリアントを使用して、任意の<b-button>のすべての背景画像と色を削除します。

outline-primary、outline-secondary、outline-success、outline-danger、outline-warning、outline-info、outline-light、およびoutline-dark。

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

リンクバリアント

バリアントlinkは、ボタンのデフォルトのパディングとサイズを維持しながら、リンクの外観を持つボタンをレンダリングします。

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

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

ヒント: Bootstrap v4.3ユーティリティクラスtext-decoration-noneを<b-button>に追加することで、リンクバリアントボタンのホバー時の下線を削除できます。

ブロックレベルボタン

blockプロパティを設定することにより、親の幅全体に広がるブロックレベルボタンを作成します。

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

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

ピルスタイル

より丸いピルスタイルのボタンをご希望ですか？プロパティpillを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 -->

このプロパティは、レンダリングされたボタンにBootstrap v4.3ユーティリティクラス.rounded-pillを追加します。

スクエアスタイル

より四角い角のスタイルのボタンをご希望ですか？プロパティsquaredを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 -->

squaredプロパティは、レンダリングされたボタンにBootstrap v4.3ユーティリティクラス.rounded-0を追加します。pillプロパティはsquaredプロパティよりも優先されます。

無効状態

disabledプロパティを設定して、ボタンのデフォルト機能を無効にします。disabledは、<a>要素および<router-link>（つまり、hrefまたはtoプロパティが設定されている）としてレンダリングされたボタンでも機能します。

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

押下状態と切り替え

プロパティpressedがtrueに設定されている場合、ボタンは押されたように（背景が暗くなり、境界線が暗くなり、インセットシャドウが表示されます）表示されます。

pressedプロパティは、次の3つの値のいずれかに設定できます。

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>は属性role="button"が設定されたリンク(<a>)要素をレンダリングし、スクリーンリーダーとキーボードのみのユーザーのためにリンクがネイティブHTML <button>のように動作するように、適切なkeydownリスナー(EnterとSpace)を設定します。無効にすると、aria-disabled="true"属性が<a>要素に設定されます。

hrefが他の値に設定されている場合（またはtoプロパティが使用されている場合）、role="button"は追加されず、キーボードイベントリスナーも有効になりません。

参照

コンポーネントリファレンス

`<b-button>`

関数型コンポーネント

ソースを表示

<b-button>コンポーネントエイリアス
<b-button>プロパティ
<b-button> スロット
<b-button> イベント

コンポーネントのエイリアス

<b-button> は以下のエイリアスを通して利用することも可能です。

<b-btn>

注意：コンポーネントのエイリアスは、BootstrapVue全体をインポートするか、コンポーネントグループプラグインを使用する場合にのみ利用可能です。

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ（クリックで昇順にソート）	型（クリックで昇順にソート）	デフォルト	説明
`active`	`Boolean`	`false`	`true`に設定すると、コンポーネントはアクティブ状態になり、アクティブなスタイルが適用されます
`active-class`	`String`		<router-link> prop: リンクがアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名 'active' に設定します。
`append`	`Boolean`	`false`	<router-link> prop: append propを設定すると、相対パスが常に現在のパスに追加されます。
`block`	`Boolean`	`false`	100％幅のボタンをレンダリングします（親コンテナの幅に合わせて広がります）。
`disabled`	`Boolean`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります
`exact`	`Boolean`	`false`	<router-link> prop: デフォルトのアクティブクラスのマッチング動作はインクルーシブマッチです。このpropを設定すると、モードがルートと正確に一致するように強制されます
`exact-active-class`	`String`		<router-link> prop: リンクが正確に一致してアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名 'active' に設定します。
`exact-path`	`Boolean`	`false`	<router-link> prop: URLのパスセクションのみを使用してマッチングを許可し、クエリとハッシュセクションを事実上無視します
`exact-path-active-class`	`String`		<router-link> prop: リンクが正確なパス一致でアクティブなときに適用されるアクティブなCSSクラスを設定します。通常、これはクラス名 'active' に設定します。
`href`	`String`		<b-link> prop: 標準的なaリンクのリンク先URLを示します
`no-prefetch`	`Boolean`	`false`	<nuxt-link> prop: Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.jsは自動的にコード分割されたページをプリフェッチします。`no-prefetch`を設定すると、特定のリンクに対してこの機能が無効になります。
`pill`	`Boolean`	`false`	'true'に設定すると、ボタンをピルスタイルの外観でレンダリングします
`prefetch` v2.15.0+	`Boolean`	`null`	<nuxt-link> prop: Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.jsは自動的にコード分割されたページをプリフェッチします。 `prefetch`を`true`または`false`に設定すると、`router.prefetchLinks`のデフォルト値が上書きされます。
`pressed`	`Boolean`	`null`	'true'に設定すると、ボタンが押されたように見え、属性'aria-pressed="true"'が追加されます。 `false`に設定すると、属性'aria-pressed="false"'が追加されます。トライステートのpropです。.sync修飾子で同期可能です
`rel`	`String`	`null`	<b-link> prop: レンダリングされたリンクに`rel`属性を設定します。
`replace`	`Boolean`	`false`	<router-link> prop: replace propを設定すると、クリック時に`router.push()`の代わりに`router.replace()`が呼び出されるため、ナビゲーションは履歴レコードを残しません。
`router-component-name` v2.15.0+	`String`		<b-link> prop: BootstrapVueは、`<router-link>`と`<nuxt-link>`を自動的に検出します。`<router-link>`に基づいたサードパーティのリンクコンポーネントを使用したい場合は、このpropをコンポーネント名に設定します。たとえば、Gridsomeを使用している場合は'g-link'に設定します（`<router-link>`固有のpropのみがコンポーネントに渡されることに注意してください）。
`size`	`String`		コンポーネントの外観のサイズを設定します。 'sm'、'md'（デフォルト）、または'lg'
`squared`	`Boolean`	`false`	'true'に設定すると、角が丸くないボタンをレンダリングします
`tag`	`String`	`'button'`	デフォルトのタグの代わりにレンダリングするHTMLタグを指定します
`target`	`String`	`'_self'`	<b-link> prop: レンダリングされたリンクに`target`属性を設定します
`to`	`Object` または `String`		<router-link> prop: リンクのターゲットルートを示します。クリックすると、to propの値は内部的に`router.push()`に渡されるため、値は文字列またはLocation記述子オブジェクトのいずれかになります
`type`	`String`	`'button'`	ボタンの「type」属性に設定する値。 'button'、'submit'、または 'reset' のいずれかになります。
`variant`	`String`	`'secondary'`	コンポーネントにBootstrapテーマのカラーバリアントの1つを適用します

<b-button> は <router-link> または <nuxt-link> コンポーネント（Nuxt.jsを使用している場合）の生成をサポートします。ルーターリンク（またはnuxtリンク）固有のpropの詳細については、ルーターサポートリファレンスセクションを参照してください。

スロット

名前	説明
`default`	ボタンに配置するコンテンツ

イベント

イベント	引数	説明
`click`	ネイティブクリックイベントオブジェクト	無効化されていないボタンがクリックされたときに発生します

`<b-button-close>`

関数型コンポーネント

ソースを表示

<b-button-close> コンポーネントのエイリアス
<b-button-close> プロパティ
<b-button-close> スロット
<b-button-close> イベント

コンポーネントのエイリアス

<b-button-close> は以下のエイリアスを通して利用することも可能です。

<b-btn-close>

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ	型	デフォルト	説明
`aria-label`	`String`	`'Close'`	レンダリングされた要素の 'aria-label' 属性の値を設定します
`content` v2.3.0+	`String`	`'×'`	閉じるボタンの内容
`disabled`	`Boolean`	`false`	`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります
`text-variant`	`String`		Bootstrapテーマのカラーバリアントの1つをテキストに適用します

スロット

名前	説明
`default`	ボタンに配置するコンテンツ。`content` propを上書きします

イベント

イベント	引数	説明
`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)