列表组(List group)

列表组是显示一系列内容的灵活而强大的组件。可以修改列表组项以支持其中的任何内容。它们也可以通过各种属性作为导航。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<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>

active 项

在<b-list-group-item>上设置active属性以指示当前的active选择。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<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>

disabled 项

在<b-list-group-item>上设置disabled属性，使其显示为disabled（也适用于actionalable项）。见下文）。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
<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-item>指定为一个可操作的链接 （<a href="...">），方法是将a指定为一个href属性 或router-link to属性。

Awesome link Link with active state Action links are easy Disabled link
<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>

或者如果您更喜欢<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>

注意事项:

  • 当属性button为true时， 所有与链接相关的属性（active属性除外）和tag属性将不起作用。
  • When href or to are set, the tag prop has no effect.

请参阅路由器支持参考页以获取路由器链接特定的道具。

上下文变量

通过code translate="no" class="notranslate text-nowrap">variant属性，使用上下文变量为具有状态背景和颜色的列表项设置样式。

Default list group item
Primary list group item
Secondary list group item
Success list group item
Danger list group item
Warning list group item
Info list group item
Light list group item
Dark list group item
<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>

上下文变量也适用于操作项。注意这里添加的悬停样式在前面的示例中不存在。还支持active状态；将其设置为指示上下文列表组项上的活动选择。

Default list group item Primary list group item Secondary list group item Success list group item Danger list group item Warning list group item Info list group item Light list group item Dark list group item
<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>

向辅助技术传达意义

使用颜色来添加含义只提供了一种视觉指示，而不会传达给辅助技术的用户，例如屏幕阅读器。确保由颜色表示的信息从内容本身（例如可见文本）中是明显的，或者通过其他方式包括在内， 例如使用.sr-only类隐藏的其他文本。

具有标识

在某些实用程序类的帮助下，将badges添加到任何列表组项以显示未读计数、活动等。

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1
<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>

cards内的组列表

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

Card with list group
Cras justo odio Dapibus ac facilisis in Vestibulum at eros

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.

Card with flush list group
Cras justo odio Dapibus ac facilisis in Vestibulum at eros
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-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>

水平列表组

将属性horizontal设置为true可在所有断点中将列表组项的布局从垂直更改为水平。 或者，将horizontal设置为响应断点（sm, md, lg或 xl），以使列表组从该断点的最小宽度开始水平。当前flush列表组不能与刷新列表组组合。

专家提示: 想要水平时等宽列表组项目吗？ 将class flex-fill添加到每个列表组项。

始终水平:

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
<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>

在断点md及以上的水平：

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
<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>

自定义内容

在flexbox实用程序类的帮助下，添加几乎所有的HTML或组件，即使是像下面这样的链接列表组。

List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
List group item heading
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Disabled List group item
3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
<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>

功能部件
View source

属性

属性 类型 默认值 描述
tag String 'div' 指定要呈现的HTML标记，而不是默认标记
flush Boolean false 设置后，呈现没有左边框和右边框的刷新列表组
horizontal Boolean or String false 设置后，水平而不是默认的垂直渲染列表组

<b-list-group-item>

功能部件
View source

属性

属性 (单击可升序排序) 类型 默认值 描述
tag String 'div' 指定要呈现的HTML标记，而不是默认标记
action Boolean 设置后，使项目具有动作的外观。使用道具“to”、“ref”或“button”时不需要
button Boolean 如果为true，则将列表组项呈现为按钮元素
variant String 将一个引导主题颜色变体应用于组件
href String 表示标准a链接的链接的目标URL
rel String 设置呈现链接的“rel”属性
target String '_self' 设置呈现链接的“target”属性
active Boolean false 当设置为“true”时，使用活动样式将组件置于活动状态
disabled Boolean false 当设置为“true”时，将禁用组件的功能并将其置于禁用状态
to String or Object 路由器链接属性：表示链接的目标路由。单击时，to prop的值将在内部传递给router.push（），因此该值可以是字符串或位置描述符对象
append Boolean false 路由器链接属性：设置附加属性总是将相对路径附加到当前路径
replace Boolean false 路由器链接属性：设置替换属性将在单击时调用“router.replace（）”，而不是“router.push（）”，因此导航不会留下历史记录
event String or Array 'click' 路由器链接属性：指定触发链接的事件。在大多数情况下，您应该将其保留为默认值
active-class String 路由器链接属性：配置当链接处于活动状态时应用的活动CSS类。通常您需要将其设置为类名“active”
exact Boolean false 路由器链接属性：默认的活动类匹配行为是包含匹配。设置此属性将强制模式与路线完全匹配
exact-active-class String 路由器链接属性：配置当链接处于活动状态时应用的活动CSS类，精确匹配。通常您需要将其设置为类名“active”
router-tag String 'a' 路由器链接属性：指定要呈现的标记，它仍将侦听用于导航的单击事件“路由器标记”转换为最终呈现路由器链接上的标记属性。通常应该使用默认值
no-prefetch Boolean false nuxt link prop：为了提高nuxt.js应用程序的响应性，当链接显示在视区内时，nuxt.js将自动预取被拆分的代码页。设置“无预取”将禁用特定链接的此功能

<b-list-group-item> 支持生成 <router-link>或 <nuxt-link>组件（如果使用nuxt.js）。 有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅Router support路由器支持参考部分。

导入单个组件

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

组成部分 命名导出 导入路径
<b-list-group> BListGroup bootstrap-vue
<b-list-group-item> BListGroupItem bootstrap-vue

例子:

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

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

Named Export Import Path
ListGroupPlugin bootstrap-vue

例子:

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