回報問題編輯此頁面

輸入組

透過於文字輸入兩側加入文字、按鈕或按鈕群組，輕鬆擴充表單控制項。

<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 附加附加元件
default 要放置在輸入群組中的內容
prepend 插入附加元件

<b-input-group-prepend>

功能元件
檢視原始碼

屬性

所有屬性的預設值都可 全域設定。

屬性
類型
預設
說明
id
字串用於設定呈示內容的 `id` 屬性，並作為視需要產生任何額外元素 ID 的基礎
is-text
布林值false如為「true」，則將內容包裝在 b-input-group-text 元件中
tag
字串'div'指定要呈示的 HTML 標籤，取代預設標籤

插槽

名稱
說明
default 要放置在輸入群組插入位置的內容

<b-input-group-append>

功能元件
檢視原始碼

屬性

所有屬性的預設值都可 全域設定。

屬性
類型
預設
說明
id
字串用於設定呈示內容的 `id` 屬性，並作為視需要產生任何額外元素 ID 的基礎
is-text
布林值false如為「true」，則將內容包裝在 b-input-group-text 元件中
tag
字串'div'指定要呈示的 HTML 標籤，取代預設標籤

插槽

名稱
說明
default 要放置在輸入群組附加位置的內容

<b-input-group-text>

功能元件
檢視原始碼

屬性

所有屬性的預設值都可 全域設定。

屬性
類型
預設
說明
tag
字串'div'指定要呈示的 HTML 標籤，取代預設標籤

插槽

名稱
說明
default 要配置在輸入群組文字中的內容

<b-input-group-addon>

功能元件
檢視原始碼

屬性

所有屬性的預設值都可 全域設定。

屬性
類型
預設
說明
append
布林值false設定為「true」時，將加註為附加，預設為「false」，也就是前置
id
字串用於設定呈示內容的 `id` 屬性，並作為視需要產生任何額外元素 ID 的基礎
is-text
布林值false如為「true」，則將內容包裝在 b-input-group-text 元件中
tag
字串'div'指定要呈示的 HTML 標籤，取代預設標籤

插槽

名稱
說明
default 要配置在輸入群組附加元件中的內容

導入個別元件

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

元件
命名匯出
導入路徑
<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)