清单群组

列表组-Bootstrap 5和Material Design 2.0组件

列表组是用于显示一系列内容的灵活而强大的组件。修改 并扩展它们以支持其中的几乎所有内容。

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子

最基本的列表组是一个无序列表，其中包含列表项和适当的类。建立 后面带有选项，也可以根据需要使用自己的CSS。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

          <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>

活动项目

将 .active 添加到 .list-group-item 中以指示当前处于活动状态 选择。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

          <ul class="list-group">
            <li class="list-group-item active" aria-current="true">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>

残疾人用品

将 .disabled 添加到 .list-group-item 使其成为 出现已禁用。请注意，某些带有 .disabled 的元素也将 需要自定义JavaScript才能完全禁用其点击事件（例如，链接）。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

          <ul class="list-group">
            <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>

冲洗

添加 .list-group-flush 删除一些边框和圆角以呈现列表 将父容器（例如卡片）中的所有物品逐一分组。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

          <ul class="list-group list-group-flush">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
          </ul>

卧式

添加 .list-group-horizontal 可以从垂直方向更改列表组项目的布局 跨所有断点水平。或者，选择一个自适应变体 .list-group-horizontal- {sm | md | lg | xl | xxl} 使列表组水平开始 在该断点的 min-width 处。目前 水平列表组不能与刷新列表组结合。

ProTip ：要在水平时使用等宽列表组项目吗？加 .flex-fill 到每个列表组项。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

          <ul class="list-group list-group-horizontal">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>
          <ul class="list-group list-group-horizontal-sm">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>
          <ul class="list-group list-group-horizontal-md">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>
          <ul class="list-group list-group-horizontal-lg">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>
          <ul class="list-group list-group-horizontal-xl">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>
          <ul class="list-group list-group-horizontal-xxl">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
          </ul>

上下文类

使用上下文类为具有状态背景和颜色的列表项设置样式。

  • Dapibus ac facilisis in
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item

          <ul class="list-group">
            <li class="list-group-item">Dapibus ac facilisis in</li>

            <li class="list-group-item list-group-item-primary">
              A simple primary list group item
            </li>
            <li class="list-group-item list-group-item-secondary">
              A simple secondary list group item
            </li>
            <li class="list-group-item list-group-item-success">
              A simple success list group item
            </li>
            <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
            <li class="list-group-item list-group-item-warning">
              A simple warning list group item
            </li>
            <li class="list-group-item list-group-item-info">A simple info list group item</li>
            <li class="list-group-item list-group-item-light">A simple light list group item</li>
            <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
          </ul>

上下文类也可以与 .list-group-item-action 一起使用。注意添加 悬停样式在前面的示例中不存在。还支持 .active 状态；应用它以指示上下文列表中的活动选择 组项目。

Dapibus ac facilisis in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item 

          <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

            <a href="#" class="list-group-item list-group-item-action list-group-item-primary"
              >A simple primary list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-secondary"
              >A simple secondary list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-success"
              >A simple success list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-danger"
              >A simple danger list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-warning"
              >A simple warning list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-info"
              >A simple info list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-light"
              >A simple light list group item</a
            >
            <a href="#" class="list-group-item list-group-item-action list-group-item-dark"
              >A simple dark list group item</a
            >
          </div>

向辅助技术传达含义：
使用颜色添加含义仅提供视觉指示，不会传达给 辅助技术的用户-例如屏幕阅读器。确保信息表示为 颜色可以从内容本身（例如可见文字）中显而易见，也可以包含在内 通过其他方式，例如用 .visually-hidden 类。

徽章

将徽章添加到任何列表组项目，以借助以下功能显示未读计数，活动等 一些 flexbox实用程序。

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1 

          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              Cras justo odio
              <span class="badge bg-primary rounded-pill">14</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              Dapibus ac facilisis in
              <span class="badge bg-primary rounded-pill">2</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              Morbi leo risus
              <span class="badge bg-primary rounded-pill">1</span>
            </li>
          </ul>

自订内容

借助以下功能，甚至可以为以下列表中的链接列表组添加几乎所有HTML： flexbox实用程序。

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

          <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
              <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>
            </a>
            <a href="#" class="list-group-item list-group-item-action">
              <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>
            </a>
            <a href="#" class="list-group-item list-group-item-action">
              <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>
            </a>
          </div>

选框

将Bootstrap的复选框和单选放置在列表组项中，并根据需要进行自定义。您 可以不用<label>s,但请记住包括 aria-label 属性和可访问性值。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros 

          <ul class="list-group">
            <li class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
              Cras justo odio
            </li>
            <li class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
              Dapibus ac facilisis in
            </li>
            <li class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
              Morbi leo risus
            </li>
            <li class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
              Porta ac consectetur ac
            </li>
            <li class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
              Vestibulum at eros
            </li>
          </ul>

如果你想 <label>s as the .list-group-item 带来巨大成功 区域，您也可以这样做。 


          <div class="list-group">
            <label class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" />
              Cras justo odio
            </label>
            <label class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" />
              Dapibus ac facilisis in
            </label>
            <label class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" />
              Morbi leo risus
            </label>
            <label class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" />
              Porta ac consectetur ac
            </label>
            <label class="list-group-item">
              <input class="form-check-input me-1" type="checkbox" value="" />
              Vestibulum at eros
            </label>
          </div>

JavaScript行为

使用标签JavaScript插件扩展我们的列表组，以创建本地标签页 内容。

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam maxime dolores expedita doloribus esse earum nemo, autem doloremque aliquid iusto illo quisquam ut architecto alias quibusdam, magni ea pariatur perspiciatis!
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 

          <div class="row">
            <div class="col-4">
              <div class="list-group" id="list-tab" role="tablist">
                <a
                  class="list-group-item list-group-item-action active"
                  id="list-home-list"
                  data-mdb-toggle="list"
                  href="#list-home"
                  role="tab"
                  aria-controls="home"
                  >Home</a
                >
                <a
                  class="list-group-item list-group-item-action"
                  id="list-profile-list"
                  data-mdb-toggle="list"
                  href="#list-profile"
                  role="tab"
                  aria-controls="profile"
                  >Profile</a
                >
                <a
                  class="list-group-item list-group-item-action"
                  id="list-messages-list"
                  data-mdb-toggle="list"
                  href="#list-messages"
                  role="tab"
                  aria-controls="messages"
                  >Messages</a
                >
                <a
                  class="list-group-item list-group-item-action"
                  id="list-settings-list"
                  data-mdb-toggle="list"
                  href="#list-settings"
                  role="tab"
                  aria-controls="settings"
                  >Settings</a
                >
              </div>
            </div>
            <div class="col-8">
              <div class="tab-content" id="nav-tabContent">
                <div
                  class="tab-pane fade show active"
                  id="list-home"
                  role="tabpanel"
                  aria-labelledby="list-home-list"
                >
                  ...
                </div>
                <div
                  class="tab-pane fade"
                  id="list-profile"
                  role="tabpanel"
                  aria-labelledby="list-profile-list"
                >
                  ...
                </div>
                <div
                  class="tab-pane fade"
                  id="list-messages"
                  role="tabpanel"
                  aria-labelledby="list-messages-list"
                >
                  ...
                </div>
                <div
                  class="tab-pane fade"
                  id="list-settings"
                  role="tabpanel"
                  aria-labelledby="list-settings-list"
                >
                  ...
                </div>
              </div>
            </div>
          </div>

Fade effect

要使选项卡面板淡入，请在每个 .tab-pane 中添加 .fade 。首先 标签窗格还必须具有 .show 才能使初始内容可见。


          <div class="tab-content">
            <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
            <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
            <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
            <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
          </div>

清单群组 - API

用法

使用数据属性

您只需指定即可激活列表组导航而无需编写任何JavaScript data-mdb-toggle="list" 或元素上。在以下位置使用这些数据属性 .list-group-item 。 


          <!-- List group -->
          <div class="list-group" id="myList" role="tablist">
            <a
              class="list-group-item list-group-item-action active"
              data-mdb-toggle="list"
              href="#home"
              role="tab"
              >Home</a
            >
            <a
              class="list-group-item list-group-item-action"
              data-mdb-toggle="list"
              href="#profile"
              role="tab"
              >Profile</a
            >
            <a
              class="list-group-item list-group-item-action"
              data-mdb-toggle="list"
              href="#messages"
              role="tab"
              >Messages</a
            >
            <a
              class="list-group-item list-group-item-action"
              data-mdb-toggle="list"
              href="#settings"
              role="tab"
              >Settings</a
            >
          </div>

          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="home" role="tabpanel">...</div>
            <div class="tab-pane" id="profile" role="tabpanel">...</div>
            <div class="tab-pane" id="messages" role="tabpanel">...</div>
            <div class="tab-pane" id="settings" role="tabpanel">...</div>
          </div>

通过JavaScript

通过JavaScript启用可选项列表项（每个列表项需要单独激活）：


          const triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
          triggerTabList.forEach((triggerEl) => {
            const tabTrigger = new mdb.Tab(triggerEl)

            triggerEl.addEventListener('click', (event) => {
              event.preventDefault()
              tabTrigger.show()
            })
          })

您可以通过以下几种方式激活单个列表项：


          const triggerEl = document.querySelector('#myTab a[href="#profile"]')
          mdb.Tab.getInstance(triggerEl).show() // Select tab by name var triggerFirstTabEl =
          document.querySelector('#myTab li:first-child a')
          mdb.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Methods

Method Description
show Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.mdb.tab event occurs).
dispose Destroys an element’s tab.
getInstance Static method which allows you to get the tab instance associated with a DOM element 

          const triggerEl = document.querySelector('#trigger')
          const tab = new mdb.Tab(triggerEl);
          tab.show()

大事记

显示新标签时，事件将按以下顺序触发：

  1. hide.mdb.tab (on the current active tab)
  2. show.mdb.tab (on the to-be-shown tab)
  3. hidden.mdb.tab (on the previous active tab, the same one as for the hide.mdb.tab event)
  4. shown.mdb.tab (on the newly-active just-shown tab, the same one as for the show.mdb.tab event)

如果没有标签处于活动状态，则 hide.mdb.tab 和 hidden.mdb.tab 事件将不会被触发。

Event type Description
show.mdb.tab This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.mdb.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.mdb.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.mdb.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. 

          const tabEl = document.querySelector('a[data-mdb-toggle="list"]')
          tabEl.addEventListener('shown.mdb.tab', function (event) {
            event.target // newly activated tab
            event.relatedTarget // previous active tab
          })

进口

MDB UI套件也可以与模块捆绑器一起使用。使用以下代码导入 此组件：


        import { Tab } from 'mdb-ui-kit';