报告问题编辑此页面

列表组

列表组是一个灵活而强大的组件，用于显示一系列内容。列表组项目可以修改为支持几乎任何内容。它们还可以通过各种属性用作导航。

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

可操作列表组项目

通过指定 <b-list-group-item> 的 href 属性或 router-link 的 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 属性不起作用。

有关 router-link 特定属性，请参阅 路由支持 参考页面。

上下文变体

通过 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 状态；将其设置为 true 以指示上下文列表组项中的活动选择。

<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 类隐藏的附加文本）包含在内。

带徽章

借助一些 flex 实用程序类，向任何列表组项添加 徽章 以显示未读计数、活动等信息。

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

卡片中的列表组

将列表组合并到 卡片 中。在使用带有 no-body 的卡片时，使用 <b-list-group> 属性 flush 属性，使列表组的侧面与卡片齐平。

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

水平列表组

将 horizontal 属性设置为 true，以将列表组项目从垂直布局更改为在所有断点处水平布局。或者，将 horizontal 设置为响应式断点（sm、md、lg 或 xl），以从该断点的最小宽度开始使列表组水平布局。目前，水平列表组无法与 flush 列表组结合使用。

专业提示：希望在水平布局时列表组项目等宽？向每个列表组项目添加 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 -->

自定义内容

借助 flexbox 实用程序类，添加几乎任何 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设置后，将呈现一个没有左右边框的齐平列表组
horizontal
Boolean 或 Stringfalse设置后，将列表组水平呈现，而不是默认的垂直呈现
tag
字符串'div'指定要呈现的 HTML 标签，而不是默认标签

插槽

名称
说明
默认 要放置在列表组中的内容（项目）

<b-list-group-item>

功能组件
查看源代码

属性

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

属性
（单击按升序排列）
类型
（单击按升序排列）
默认值
说明
action
布尔值false设置后，使项目看起来像具有操作。在使用属性“to”、“href”或“button”时不需要
active
布尔值false设置为“true”时，将组件置于活动状态并使用活动样式
active-class
字符串<router-link> 属性：配置在链接处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
append
布尔值false<router-link> 属性：设置 append 属性始终将相对路径附加到当前路径
button
布尔值false为 true 时，将列表组项目呈现为按钮元素
disabled
布尔值false设置为“true”时，禁用组件的功能并将其置于禁用状态
exact
布尔值false<router-link> 属性：默认活动类匹配行为是包含匹配。设置此属性会强制模式与路由完全匹配
exact-active-class
字符串<router-link> 属性：配置在链接通过完全匹配处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
exact-path
布尔值false<router-link> 属性：允许仅使用 url 的路径部分进行匹配，有效地忽略查询和哈希部分
exact-path-active-class
字符串<router-link> 属性：配置在链接通过完全路径匹配处于活动状态时应用的活动 CSS 类。通常，您会希望将其设置为类名“active”
href
字符串<b-link> 属性：表示标准 a 链接的目标 URL
no-prefetch
布尔值false<nuxt-link> 属性：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分页面。设置“no-prefetch”将禁用特定链接的此功能
prefetch
v2.15.0+ 		布尔值null<nuxt-link> prop：为了提高 Nuxt.js 应用程序的响应能力，当链接将在视口中显示时，Nuxt.js 将自动预取代码拆分页面。将 `prefetch` 设置为 `true` 或 `false` 将覆盖 `router.prefetchLinks` 的默认值
rel
字符串null<b-link> prop：在呈现的链接上设置 `rel` 属性
replace
布尔值false<router-link> prop：单击时，设置 replace prop 将调用 `router.replace()` 而不是 `router.push()`，因此导航不会留下历史记录
router-component-name
v2.15.0+ 		字符串<b-link> prop：BootstrapVue 在 `<router-link>` 和 `<nuxt-link>` 之间自动检测。在希望根据 `<router-link>` 使用第三方链接组件的情况下，将此 prop 设置为组件名称。例如，如果你正在使用 Gridsome，则将其设置为“g-link”（请注意，只有特定于 `<router-link>` 的 prop 才传递给组件）
tag
字符串'div'指定要呈现的 HTML 标签，而不是默认标签
target
字符串'_self'<b-link> prop：在呈现的链接上设置 `target` 属性
to
对象 或 字符串<router-link> prop：表示链接的目标路由。单击时，to prop 的值将在内部传递给 `router.push()`，因此该值可以是字符串或 Location 描述符对象
variant
字符串将 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)