入力グループ

テキスト入力の両側にテキスト、ボタン、またはボタングループを追加することで、フォームコントロールを簡単に拡張できます。

<div>
  <!-- Using props -->
  <b-input-group size="lg" prepend="$" append=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <!-- Using slots -->
  <b-input-group class="mt-3">
    <template #append>
      <b-input-group-text><strong class="text-danger">!</strong></b-input-group-text>
    </template>
    <b-form-input></b-form-input>
  </b-input-group>

  <!-- Using components -->
  <b-input-group prepend="Username" class="mt-3">
    <b-form-input></b-form-input>
    <b-input-group-append>
      <b-button variant="outline-success">Button</b-button>
      <b-button variant="info">Button</b-button>
    </b-input-group-append>
  </b-input-group>
</div>

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

使用方法

プロパティ、名前付きスロット、またはサブコンポーネントを使用してアドオンを添付できます。

`prepend` プロパティと `append` プロパティを使用する

値は内部的に <b-input-group-text> でラップされ、正しく表示されます。

<div>
  <b-input-group prepend="$" append=".00">
    <b-form-input></b-form-input>
  </b-input-group>

  <b-input-group prepend="0" append="100" class="mt-3">
    <b-form-input type="range" min="0" max="100"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-using-props.vue -->

名前付きスロットを使用する

アドオンをより細かく制御したい場合は、代わりに prepend スロットと append スロットを使用できます。

スロットのコンテンツは、正しく表示されるように <b-input-group-prepend> または <b-input-group-append> によって自動的にラップされます。

<div>
  <b-input-group>
    <template #prepend>
      <b-input-group-text >Username</b-input-group-text>
    </template>
    <b-form-input></b-form-input>

    <template #append>
      <b-dropdown text="Dropdown" variant="success">
        <b-dropdown-item>Action A</b-dropdown-item>
        <b-dropdown-item>Action B</b-dropdown-item>
      </b-dropdown>
    </template>
  </b-input-group>
</div>

<!-- b-input-group-using-slots.vue -->

サブコンポーネントを使用する

<b-input-group-prepend> または <b-input-group-append> を使用して、任意のアドオンを好きな場所に追加し、これらのコンポーネントを使用して入力グループ内のボタンをグループ化します。単一のボタンは、適切なスタイル設定のために、常にこれらのコンポーネントでラップする必要があります。

<div>
  <b-input-group>
    <b-input-group-prepend>
      <b-button variant="outline-info">Button</b-button>
    </b-input-group-prepend>

    <b-form-input type="number" min="0.00"></b-form-input>

    <b-input-group-append>
      <b-button variant="outline-secondary">Button</b-button>
      <b-button variant="outline-primary">Button</b-button>
      <b-input-group-text>
        <b-icon icon="x" />
      </b-input-group-text>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group-addons-placement.vue -->

コンテンツがテキスト形式の場合は、<b-input-group-prepend> または <b-input-group-append> に is-text プロパティを設定して、適切なスタイルを適用します。または、<b-input-group-prepend> または <b-input-group-append> の中に <b-input-group-text> サブコンポーネントを配置します。これは、BootstrapVue のアイコンのいずれかを使用する場合にも適用されます。

サポートされているフォームコントロール

以下は、入力グループの*メイン*入力要素としてサポートされているフォームコントロールです。

注意事項

BootstrapVue は、size が指定された <b-input-group> に配置された場合に、<b-form-file> 入力のサイズ変更を処理するために、カスタム SCSS/CSS を使用します。
BootstrapVue は、<b-form-input type="range"> が <b-input-group> に配置された場合に、カスタム SCSS/CSS を使用します。
BootstrapVue のカスタムコンポーネント (つまり、<b-form-spinbutton>、<b-form-rating>、<b-form-tags> など) には、BootstrapVue のカスタム SCSS/CSS が必要です。

チェックボックスとラジオボタンのアドオン

テキストの代わりに、入力グループのアドオン内にチェックボックスまたはラジオボタンを配置します。

**注記:** Bootstrap v4.x では、カスタムラジオボタンとチェックボックスではなく、ネイティブのラジオボタンとチェックボックス入力を使用することを推奨していますが、<b-form-radio> および <b-form-checkbox> をいくつかのユーティリティクラスを適用して使用することも可能です。

ネイティブチェックボックスとラジオボタンアドオン

<div>
  <b-input-group class="mb-2">
    <b-input-group-prepend is-text>
      <input type="checkbox" aria-label="Checkbox for following text input">
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with checkbox"></b-form-input>
  </b-input-group>

  <b-input-group>
    <b-input-group-prepend is-text>
      <input type="radio" aria-label="Radio for following text input">
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with radio input"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-checks-radios.vue -->

カスタムラジオボタン、チェックボックス、およびスイッチアドオン

アドオンとして <b-form-checkbox> および <b-form-radio> コンポーネントを使用し、Bootstrap ユーティリティクラスを使用して追加のスタイルを適用し、アドオンに「適合」させます。

<div>
  <b-input-group class="mb-2">
    <b-input-group-prepend is-text>
      <b-form-checkbox class="mr-n2">
        <span class="sr-only">Checkbox for following text input</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with checkbox"></b-form-input>
  </b-input-group>

  <b-input-group class="mb-2">
    <b-input-group-prepend is-text>
      <b-form-radio class="mr-n2">
        <span class="sr-only">Radio for following text input</span>
      </b-form-radio>
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with radio input"></b-form-input>
  </b-input-group>

  <b-input-group>
    <b-input-group-prepend is-text>
      <b-form-checkbox switch class="mr-n2">
        <span class="sr-only">Switch for following text input</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with switch"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-custom-checks-radios.vue -->

上記の例では、<span> に .sr-only クラスを使用して、カスタムコントロールのラベルコンテンツを視覚的に非表示にし (スクリーンリーダーユーザーにはアクセスできるようにしたまま)、ユーティリティクラス .mr-n2 を使用して負の右マージンを追加し、コントロールと非表示のラベルの間の「ガター」スペースを補正しています。

複数の入力

<div>
  <b-input-group prepend="First and last name" class="mb-2">
    <b-form-input aria-label="First name"></b-form-input>
    <b-form-input aria-label="Last name"></b-form-input>
  </b-input-group>
</div>

<!-- input-group-multiple-inputs.vue -->

複数のアドオン

複数のアドオンがサポートされており、チェックボックスとラジオボタン入力バージョンと組み合わせることができます。

<div>
  <b-input-group prepend="Item">
    <b-input-group-prepend is-text>
      <input type="checkbox" aria-label="Checkbox for following text input">
    </b-input-group-prepend>
    <b-input-group-prepend is-text><b>$</b></b-input-group-prepend>
    <b-form-input type="number" aria-label="Text input with checkbox"></b-form-input>
  </b-input-group>
</div>

<!-- b-input-group-multiple-addons.vue -->

<div>
  <b-input-group>
    <template #prepend>
      <b-dropdown text="Dropdown" variant="info">
        <b-dropdown-item>Action A</b-dropdown-item>
        <b-dropdown-item>Action B</b-dropdown-item>
      </b-dropdown>
    </template>

    <b-form-input></b-form-input>

    <template #append>
      <b-dropdown text="Dropdown" variant="outline-secondary" v-for="i in 2" :key="i">
        <b-dropdown-item>Action C</b-dropdown-item>
        <b-dropdown-item>Action D</b-dropdown-item>
      </b-dropdown>
    </template>
  </b-input-group>
</div>

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

コントロールのサイズ変更

size プロパティを sm または lg に設定して、それぞれ小または大の高さに設定します。個々の入力またはボタンにサイズを設定する必要はありません。ただし、ドロップダウンにもサイズを設定する*必要があります*。

<div>
  <b-input-group
    v-for="size in ['sm','','lg']"
    :key="size"
    :size="size"
    class="mb-3"
    prepend="Label"
  >
    <b-form-input></b-form-input>
    <b-input-group-append>
      <b-button size="sm" text="Button" variant="success">Button</b-button>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group-size.vue -->

幅を制御するには、入力を標準の Bootstrap グリッド列内に配置します。

カスタムラジオボタン、チェックボックス、およびスイッチアドオンのサイズ変更

アドオンとして <b-form-radio> または <b-form-checkbox> を使用する場合、選択したサイズによっては、すべてを正しく適合させるために追加のユーティリティクラスが必要になる場合があります。

<div>
  <b-input-group size="sm" prepend="Small" class="mb-2">
    <b-form-input aria-label="Small text input with custom switch"></b-form-input>
    <b-input-group-append is-text>
      <b-form-checkbox switch class="mr-n2 mb-n1">
        <span class="sr-only">Checkbox for previous text input</span>
      </b-form-checkbox>
    </b-input-group-append>
  </b-input-group>

  <b-input-group size="lg" prepend="Large" class="mb-2">
    <b-form-input aria-label="Large text input with switch"></b-form-input>
    <b-input-group-append is-text>
      <b-form-checkbox switch class="mr-n2">
        <span class="sr-only">Switch for previous text input</span>
      </b-form-checkbox>
    </b-input-group-append>
  </b-input-group>
</div>

<!-- b-input-group-custom-checks-radios-sizing.vue -->

具体的には、<b-input-group> で sm サイズを使用する場合、.mb-n1 ユーティリティクラスを使用して、負の下マージンを追加する必要があります。

コンテキスト状態

Bootstrap v4 は現在、入力グループのコンテキスト状態のスタイル設定 (つまり、有効または無効) を**サポートしていません**。ただし、入力グループ内の入力はコンテキスト状態をサポートしています。

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

`<b-input-group>`

ファンクショナルコンポーネント

ソースコードを表示

<b-input-group> プロパティ
<b-input-group> スロット

プロパティ

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

プロパティ	タイプ	デフォルト	説明
`append`	`文字列`		入力グループに追加するテキスト
`append-html` 注意して使用する	`文字列`		入力グループに追加する HTML 文字列。「append」プロパティよりも優先されます。
`id`	`文字列`		文字列
レンダリングされたコンテンツの `id` 属性を設定するために使用され、必要に応じて追加の要素 ID を生成するためのベースとして使用されます。	`文字列`		prepend
`文字列` 注意して使用する	`文字列`		入力グループの先頭に追加するテキスト
`prepend-html`	`文字列`		注意して使用する
`入力グループの先頭に追加する HTML 文字列。「prepend」プロパティよりも優先されます。`	`文字列`	`size`	文字列

'md'

コンポーネントの外観のサイズを設定します。 'sm'、 'md' (デフォルト)、または 'lg'

tag	説明
`append`	文字列
`'div'`	デフォルトタグの代わりにレンダリングする HTML タグを指定します
レンダリングされたコンテンツの `id` 属性を設定するために使用され、必要に応じて追加の要素 ID を生成するためのベースとして使用されます。	注意: HTML 文字列をサポートするプロパティ (`*-html`) は、生のユーザー提供の値が渡されると、クロスサイトスクリプティング (XSS) 攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります!

スロット

ファンクショナルコンポーネント

ソースコードを表示

名前
説明

append

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

プロパティ	タイプ	デフォルト	説明
`id`	`文字列`		文字列
`追加の添付ファイル`	`default`	`入力グループに配置するコンテンツ`	prepend
`入力グループの先頭に追加する HTML 文字列。「prepend」プロパティよりも優先されます。`	`文字列`	`size`	文字列

先頭に追加の添付ファイル

tag	説明
`'div'`	`<b-input-group-prepend>`

`<b-input-group-prepend>` プロパティ

ファンクショナルコンポーネント

ソースコードを表示

<b-input-group-prepend> スロット
プロパティ

is-text

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

プロパティ	タイプ	デフォルト	説明
`id`	`文字列`		文字列
`追加の添付ファイル`	`default`	`入力グループに配置するコンテンツ`	prepend
`入力グループの先頭に追加する HTML 文字列。「prepend」プロパティよりも優先されます。`	`文字列`	`size`	文字列

真偽値

tag	説明
`'div'`	false

`<b-input-group-text>`

ファンクショナルコンポーネント

ソースコードを表示

<b-input-group-text> プロパティ
<b-input-group-text> スロット

プロパティ

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

プロパティ	タイプ	デフォルト	説明
`入力グループの先頭に追加する HTML 文字列。「prepend」プロパティよりも優先されます。`	`文字列`	`size`	文字列

スロット

tag	説明
`'div'`	入力グループテキストに配置するコンテンツ

`<b-input-group-addon>`

ファンクショナルコンポーネント

ソースコードを表示

<b-input-group-addon> プロパティ
<b-input-group-addon> スロット

プロパティ

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

プロパティ	タイプ	デフォルト	説明
`append`	`default`	`入力グループに配置するコンテンツ`	'true' に設定すると、アドオンは追加されます。デフォルトは 'false' で、前に付加されます。
`id`	`文字列`		文字列
`追加の添付ファイル`	`default`	`入力グループに配置するコンテンツ`	prepend
`入力グループの先頭に追加する HTML 文字列。「prepend」プロパティよりも優先されます。`	`文字列`	`size`	文字列

スロット

tag	説明
`'div'`	入力グループアドオンに配置するコンテンツ

個々のコンポーネントのインポート

次の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント	名前付きエクスポート	インポートパス
`<b-input-group>`	`BInputGroup`	`bootstrap-vue`
`<b-input-group-prepend>`	`BInputGroupPrepend`	`bootstrap-vue`
`<b-input-group-append>`	`BInputGroupAppend`	`bootstrap-vue`
`<b-input-group-text>`	`BInputGroupText`	`bootstrap-vue`
`<b-input-group-addon>`	`BInputGroupAddon`	`bootstrap-vue`

例

import { BInputGroup } from 'bootstrap-vue'
Vue.component('b-input-group', BInputGroup)

Vue.jsプラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート	インポートパス
`InputGroupPlugin`	`bootstrap-vue`

例

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

使用方法

prepend プロパティと append プロパティを使用する

名前付きスロットを使用する

サブコンポーネントを使用する

サポートされているフォームコントロール

チェックボックスとラジオボタンのアドオン

ネイティブ チェックボックスとラジオボタン アドオン

カスタム ラジオボタン、チェックボックス、およびスイッチ アドオン

複数の入力

複数のアドオン

ドロップダウン アドオン

コントロールのサイズ変更

カスタム ラジオボタン、チェックボックス、およびスイッチ アドオンのサイズ変更

コンテキスト状態

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

プロパティ

コンポーネントの外観のサイズを設定します。 'sm'、 'md' (デフォルト)、または 'lg'

append

先頭に追加の添付ファイル

is-text

真偽値

プロパティ

スロット

プロパティ

スロット

個々のコンポーネントのインポート

Vue.jsプラグインとしてのインポート

`prepend` プロパティと `append` プロパティを使用する

ネイティブチェックボックスとラジオボタンアドオン

カスタムラジオボタン、チェックボックス、およびスイッチアドオン

ドロップダウンアドオン

カスタムラジオボタン、チェックボックス、およびスイッチアドオンのサイズ変更