输入框(input-group)

通过在文本输入的两边添加文本、按钮或按钮组，可以轻松扩展表单控件。

$
.00
!
Username
<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 v-slot: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-text>内部包装以正确显示。

$
.00
0
100
<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>

使用命名插槽

如果您想要更好地控制插件，可以使用 prepend和appendslots代替。

插槽内容将由 <b-input-group-prepend>或 <b-input-group-append>自动包装以正确显示。

Username
<div>
  <b-input-group>
    <template v-slot:prepend>
      <b-input-group-text >Username</b-input-group-text>
    </template>
    <b-form-input></b-form-input>

    <template v-slot: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-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-secondary">Button</b-button>
    </b-input-group-append>
  </b-input-group>
</div>

如果内容是文本性质的，则将is-text属性 设置为<b-input-group-prepend>或 <b-input-group-append>，以应用适当的样式。或者， 将<b-input-group-text>子组件放入 <b-input-group-prepend>或 <b-input-group-append>中。

支持的表单控件

以下是作为输入组的主输入元素支持的表单控件：

  • <b-form-input>
  • <b-form-textarea>
  • <b-form-select>
  • <b-form-file>

注意事项:

  • BootstrapVue使用定制的SCSS/CSS来处理<b-form-file>输入在指定大小的 <b-input-group>中时的size调整。
  • 当<b-form-input type="range">放在 <b-input-group>中时，BootstrapVue使用自定义SCSS/CSS。

复选框和单选插件

在输入组的加载项中放置任何复选框或单选框，而不是文本。

注意: Bootstrap v4.x建议使用本地radio和checkbox输入，而不是自定义radio和checkbox， 但是可以使用<b-form-radio>和 <b-form-checkbox>并应用一些实用程序类。

Native 复选框的 radio 插件

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

自定义 radio,复选框和开关插件

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

在上面的示例中，我们使用<span>上的 .sr-only类直观地隐藏自定义控件的标签内容（同时使屏幕阅读器用户仍然可以访问这些内容）， 并使用实用程序类.mr-n2添加一个负右边距以补偿控件和隐藏标签之间的“边距”空间。

多个输入

First and last name
<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>

多个插件

支持多个加载项，并且可以与复选框和radio输入版本混合使用。

Item
$
<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>
<div>
  <b-input-group>
    <template v-slot: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 v-slot: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>

控制大小

使用size属性将高度分别设置为sm或 lg （小或大）。不需要设置单个输入或按钮的大小。但请注意，您还需要在下拉列表中设置大小。

Label
Label
Label
<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-form-radio>或 <b-form-checkbox>作为加载项，则可能需要附加实用程序类以使所有内容都正确匹配，具体取决于所选的大小：

Small
Large
<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>上使用smsize时， 需要通过使用.mb-n1 实用程序类添加负的下边距。

上下文状态

引导程序v4当前不支持输入组的上下文状态样式（即有效或无效）。但是，输入组中的输入确实支持上下文状态。

组件引用

<b-input-group>

Functional Component
查看源代码

属性

属性 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
size String 设置组件外观的大小。'sm'，'md'（默认）或'lg'
prepend String 将文本添加到输入组之前
prepend-html Use with caution String HTML字符串，位于输入组的前面。 优先于“ prepend”属性。 谨慎使用
append String 要附加到输入组的文本
append-html Use with caution String 要附加到输入组的HTML字符串。优先于'append'属性。慎用
tag String 'div' 指定要呈现的HTML标记，而不是默认标记

警告: 当传递原始用户提供的值时，支持HTML字符串（*-html）的属性可能容易 受到跨站点脚本（XSS）攻击。 必须先正确 清理 用户输入！

插槽

插槽名称 描述
prepend 前置附件
append 附加附件

<b-input-group-prepend>

功能部件
View source

属性

属性 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
tag String 'div' 指定要呈现的HTML标签，而不是默认标签
is-text Boolean false 为“ true”时，将内容包装在b-input-group-text组件中

<b-input-group-append>

功能部件
View source

属性

属性 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
tag String 'div' 指定要呈现的HTML标签，而不是默认标签
is-text Boolean false 为“ true”时，将内容包装在b-input-group-text组件中

<b-input-group-text>

功能部件
View source

属性

属性 类型 默认值 描述
tag String 'div' 指定要呈现的HTML标签，而不是默认标签

<b-input-group-addon>

功能部件
View source

属性

属性 类型 默认值 描述
id String 用于在渲染的内容上设置“id”属性，并用作根据需要生成任何其他元素ID的基础
tag String 'div' 指定要呈现的HTML标记，而不是默认标记
is-text Boolean false 当“true”时，将内容包装在b-input-group-text组件中
append Boolean false 当设置为“true”时，将加载项设置为附加。默认为“false”，该值在前面

导入单个组件

您可以通过以下命名的导出将单个组件导入到项目中：

组件 命名输出 导入路径
<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)