回報問題編輯此頁

清單群組

清單群組是一個用於顯示一系列內容的彈性且強大的元件。清單群組項目可以修改，以支援其中的任何內容。它們也可以透過各種屬性用作導覽。

<b-list-group>
  <b-list-group-item>Cras justo odio</b-list-group-item>
  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

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

目前項目

在 <b-list-group-item> 上設定 active 屬性，以指出目前已選取的項目。

<b-list-group>
  <b-list-group-item>Cras justo odio</b-list-group-item>
  <b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group-active.vue -->

停用項目

在 <b-list-group-item> 上設定 disabled 屬性，使它看起來停用（對具有動作的項目也適用。請見下方）。

<b-list-group>
  <b-list-group-item disabled>Cras justo odio</b-list-group-item>
  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group-disabled.vue -->

具有動作的清單群組項目

透過指定 href 屬性或 路由器連結 to 屬性，將 <b-list-group-item> 變成具有動作的連結 (<a href="...">)。

<b-list-group>
  <b-list-group-item href="#some-link">Awesome link</b-list-group-item>
  <b-list-group-item href="#" active>Link with active state</b-list-group-item>
  <b-list-group-item href="#">Action links are easy</b-list-group-item>
  <b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
</b-list-group>

<!-- b-list-group-link.vue -->

或者如果你偏好使用 <button> 元素而非連結，請將 button 屬性設定為 true。

<b-list-group>
  <b-list-group-item button>Button item</b-list-group-item>
  <b-list-group-item button>I am a button</b-list-group-item>
  <b-list-group-item button disabled>Disabled button</b-list-group-item>
  <b-list-group-item button>This is a button too</b-list-group-item>
</b-list-group>

<!-- b-list-group-button.vue -->

注意事項

  • 當 button 屬性為 true 時，所有 連結相關屬性 （除了 active）以及 tag 屬性將不起作用。
  • 當 href 或 to 設定時，tag 屬性將不起作用。

請參閱 路由器支援 參考頁面，以瞭解路由器連結專屬的屬性。

情境式變化

使用情境式變化透過 variant 屬性來設定具有狀態背景及顏色的清單項目樣式。

<b-list-group>
  <b-list-group-item>Default list group item</b-list-group-item>
  <b-list-group-item variant="primary">Primary list group item</b-list-group-item>
  <b-list-group-item variant="secondary">Secondary list group item</b-list-group-item>
  <b-list-group-item variant="success">Success list group item</b-list-group-item>
  <b-list-group-item variant="danger">Danger list group item</b-list-group-item>
  <b-list-group-item variant="warning">Warning list group item</b-list-group-item>
  <b-list-group-item variant="info">Info list group item</b-list-group-item>
  <b-list-group-item variant="light">Light list group item</b-list-group-item>
  <b-list-group-item variant="dark">Dark list group item</b-list-group-item>
</b-list-group>

<!-- b-list-group-variant.vue -->

情境式變化也適用於動作項目。請注意這裡加入了懸停樣式，在先前的範例中沒有出現。也支援 active 狀態；設定它來標示情境清單群組項目中已啟用的選取狀態。

<b-list-group>
  <b-list-group-item href="#">Default list group item</b-list-group-item>
  <b-list-group-item href="#" variant="primary">Primary list group item</b-list-group-item>
  <b-list-group-item href="#" variant="secondary">Secondary list group item</b-list-group-item>
  <b-list-group-item href="#" variant="success">Success list group item</b-list-group-item>
  <b-list-group-item href="#" variant="danger">Danger list group item</b-list-group-item>
  <b-list-group-item href="#" variant="warning">Warning list group item</b-list-group-item>
  <b-list-group-item href="#" variant="info">Info list group item</b-list-group-item>
  <b-list-group-item href="#" variant="light">Light list group item</b-list-group-item>
  <b-list-group-item href="#" variant="dark">Dark list group item</b-list-group-item>
</b-list-group>

<!-- b-list-group-variant-action.vue -->

傳達輔助技術的意義

使用顏色來增加意義只提供視覺指示，輔助技術使用者將無法傳送此訊息（例如螢幕朗讀程式）。請確保由顏色指稱的資訊在內容中本身就很明顯（例如可見文字），或者透過其他方式包含，例如使用 .sr-only 類別隱藏的附加文字。

附有徽章

加入 徽章 到任何清單群組項目，以顯示未讀計數、活動等資訊，並使用一些 彈性公用程式類別。

<b-list-group>
  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Cras justo odio
    <b-badge variant="primary" pill>14</b-badge>
  </b-list-group-item>

  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <b-badge variant="primary" pill>2</b-badge>
  </b-list-group-item>

  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Morbi leo risus
    <b-badge variant="primary" pill>1</b-badge>
  </b-list-group-item>
</b-list-group>

<!-- b-list-group-badges.vue -->

卡牌中的清單群組

在 卡牌 中加入清單群組。使用 <b-list-group> 屬性 flush 屬性，在使用具 no-body 的卡牌時，可使清單群組的側面與卡牌齊平。

<b-card-group deck>
  <b-card header="Card with list group">
    <b-list-group>
      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <p class="card-text mt-2">
      Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
    </p>
  </b-card>

  <b-card no-body header="Card with flush list group">
    <b-list-group flush>
      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <b-card-body>
      Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
    </b-card-body>
  </b-card>
</b-card-group>

<!-- b-list-group-card.vue -->

水平清單群組

將 prop horizontal 設定為 true 來變更所有斷點中群組項目清單的佈局，使其從垂直變成水平。或者，將 horizontal 設定為回應式斷點 (sm, md, lg 或 xl) 來讓群組項目清單於該斷點的最小寬度上開始顯示為水平式。目前，水平式的群組項目清單無法與 flush 群組項目清單合併。

專業提示：希望在水平顯示時，群組項目清單的寬度相等嗎？請在每個群組項目清單上，新增 class flex-fill。

永遠保持水平

<div>
  <b-list-group horizontal>
    <b-list-group-item>Cras justo odio</b-list-group-item>
    <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
    <b-list-group-item>Morbi leo risus</b-list-group-item>
  </b-list-group>
</div>

<!-- b-list-group-horizontal.vue -->

在 md 及以上的斷點水平顯示

<div>
  <b-list-group horizontal="md">
    <b-list-group-item>Cras justo odio</b-list-group-item>
    <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
    <b-list-group-item>Morbi leo risus</b-list-group-item>
  </b-list-group>
</div>

<!-- b-list-group-horizontal-md.vue -->

自訂內容

利用 彈性盒狀公用程式類別，在幾乎任何 HTML 或元件中新增，甚至能用於連結的群組項目清單，例如以下所示群組項目清單。

<b-list-group>
  <b-list-group-item href="#" active class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group item heading</h5>
      <small>3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small>Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small class="text-muted">Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" disabled class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Disabled List Group item</h5>
      <small class="text-muted">3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small class="text-muted">Donec id elit non mi porta.</small>
  </b-list-group-item>
</b-list-group>

<!-- b-list-group-content.vue -->

元件參考

<b-list-group>

函式元件
檢視原始碼

屬性

所有屬性的預設值皆可 設定全球設定。

屬性
類型
預設值
說明
flush
布林值false設定時，將顯示不帶左右邊框的 flush 群組項目清單
horizontal
布林值 或 字串false設定時，將水平顯示群組項目清單，而不是預設的垂直顯示
tag
字串'div'指定要顯示的 HTML 標籤，而不是預設標籤

區塊

名稱
說明
預設 要放置在群組項目清單的內容 (項目)

<b-list-group-item>

函式元件
檢視原始碼

屬性

所有屬性的預設值皆可 設定全球設定。

屬性
(按一下顯示由低到高排序)
類型
(按一下顯示由低到高排序)
預設值
說明
action
布林值false設定後，讓項目看起來具有動作。如果使用屬性 'to'、'href' 或 'button'，不需要 action。
active
布林值false設為 `true` 時，元件會進入 active 狀態，並套用 active 樣式。
active-class
字串「」屬性：連結處於 active 狀態時套用的 active CSS 類別。通常會設定為類別名稱「active」
append
布林值false「」屬性：設定 append 屬性後，永遠會將相對路徑附加至目前的 path。
button
布林值false設為 true 時，將以按鈕元素呈現 list-group-item。
disabled
布林值false設為 `true` 時，會停用元件功能，並將元件置於已停用狀態。
exact
布林值false<router-link> 屬性：預設的 active 類別比對行為屬於包含式比對。設定此屬性後，會強制模式精確比對路由。
exact-active-class
字串<router-link> 屬性：精確比對時，連結處於 active 狀態時套用的 active CSS 類別。通常會設定為類別名稱「active」
exact-path
布林值false<router-link> 屬性：只允許使用網址的 path 區段做比對，有效地忽略 query 和 hash 區段。
exact-path-active-class
字串<router-link> 屬性：精確比對 path 時，連結處於 active 狀態時套用的 active CSS 類別。通常會設定為類別名稱「active」
href
字串「」屬性：表示標準 a 連結的目標網址。
no-prefetch
布林值false「」屬性：若要提升 Nuxt.js 程式的回應速度，在連結即將顯示於視窗內時，Nuxt.js 會自動預先擷取程式碼區塊拆分的頁面。設定「no-prefetch」會停用特定連結的此功能。
prefetch
v2.15.0+ 		布林值null「」屬性：若要提升 Nuxt.js 程式的回應速度，在連結即將顯示於視窗內時，Nuxt.js 會自動預先擷取程式碼區塊拆分的頁面。設定「prefetch」為 `true` 或 `false` 會覆寫 `router.prefetchLinks` 的預設值。
rel
字串null「」屬性：在已呈現的連結上設定「rel」屬性。
replace
布林值false「」屬性：設定 replace 屬性後，按一下時會呼叫 `router.replace()`，而非 `router.push()`，因此導覽不會留下歷程記錄。
router-component-name
v2.15.0+ 		字串「」屬性：BootstrapVue 會自動偵測「」和「」之間的差異。如果您想使用基於「」的第三方連結元件，請將此屬性設定為元件名稱。例如，如果您使用 Gridsome，請將其設定為「g-link」（請注意，只有「」特定的屬性會傳遞至元件）
tag
字串'div'指定要顯示的 HTML 標籤，而不是預設標籤
target
字串「_self」<b-link> prop：設定呈現的連結之 `target` 屬性
至
物件 或 字串<router-link> prop：表示連結的目標路由。當被按一下時，to prop 的值會在內部傳遞給 `router.push()`，所以值可以是字串或位置描述物件
變種
字串套用其中一種 Bootstrap 主題顏色變種到此元件

<b-list-group-item> 支援產生 <router-link> 或 <nuxt-link> 元件（若使用 Nuxt.js）。如需路由連結（或 nuxt 連結）特定 prop 的更多詳細資料，請參閱 路由支援 參考區段。

區塊

名稱
說明
預設 要放置到列表群組項目的內容

匯入個別元件

您可以使用以下已命名匯出方式將個別元件匯入您的專案

元件
已命名匯出
匯入路徑
<b-list-group>BListGroupbootstrap-vue
<b-list-group-item>BListGroupItembootstrap-vue

範例

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

匯入為 Vue.js 外掛程式

此外掛程式包含上列所有個別元件外掛程式也包含任何元件別名。

已命名匯出
匯入路徑
ListGroupPluginbootstrap-vue

範例

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