报告问题编辑此页面

输入组

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

<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-text> 子组件放在 <b-input-group-prepend> 或 <b-input-group-append> 中。当你想要使用 BootstrapVue 的图标 时，这也适用。

支持的表单控件

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

注释

  • 当 <b-form-file> 输入被放置在指定了 size 的 <b-input-group> 中时，BootstrapVue 使用自定义 SCSS/CSS 来处理尺寸。
  • 当 <b-form-input type="range"> 被放置在 <b-input-group> 中时，BootstrapVue 使用自定义 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>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

属性
类型
默认值
说明
append
字符串要追加到输入组的文本
append-html
谨慎使用 		字符串要追加到输入组的 HTML 字符串。优先于“append”属性
id
字符串用于在呈现的内容上设置 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
prepend
字符串要预置到输入组的文本
prepend-html
谨慎使用 		字符串要预置到输入组的 HTML 字符串。优先于“prepend”属性
size
字符串设置组件外观的大小。“sm”、“md”（默认）或“lg”
tag
字符串'div'指定要呈现的 HTML 标签，而不是默认标签

注意：支持 HTML 字符串（*-html）的属性在传递原始用户提供的值时可能容易受到跨站点脚本 (XSS) 攻击。您必须首先正确清理用户输入！

插槽

名称
说明
append 附加附件
默认 要放置在输入组中的内容
prepend 附加前缀

<b-input-group-prepend>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

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

插槽

名称
说明
默认 要放置在输入组前缀中的内容

<b-input-group-append>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

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

插槽

名称
说明
默认 要放置在输入组后缀中的内容

<b-input-group-text>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

属性
类型
默认值
说明
tag
字符串'div'指定要呈现的 HTML 标签，而不是默认标签

插槽

名称
说明
默认 要放置在输入组文本中的内容

<b-input-group-addon>

功能组件
查看源代码

属性

所有属性默认值均可全局配置。

属性
类型
默认值
说明
append
布尔值false设置为“true”时，将附加组件设置为追加。默认为“false”，即前缀
id
字符串用于在呈现的内容上设置 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
is-text
布尔值false当为“true”时，将内容包装在 b-input-group-text 组件中
tag
字符串'div'指定要呈现的 HTML 标签，而不是默认标签

插槽

名称
说明
默认 要放置在输入组附加组件中的内容

导入单个组件

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

组件
命名导出
导入路径
<b-input-group>BInputGroupbootstrap-vue
<b-input-group-prepend>BInputGroupPrependbootstrap-vue
<b-input-group-append>BInputGroupAppendbootstrap-vue
<b-input-group-text>BInputGroupTextbootstrap-vue
<b-input-group-addon>BInputGroupAddonbootstrap-vue

示例

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

作为 Vue.js 插件导入

此插件包含上述所有列出的单个组件。插件还包括任何组件别名。

命名导出
导入路径
InputGroupPluginbootstrap-vue

示例

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