标签

标签-Bootstrap 5和Material Design 2.0组件

标签是准导航组件,可以极大地提高网站的清晰度并增加 用户体验。

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


基本例子

基本标签分为2个主要部分- 标签导航(包含 nav-item s)和 标签内容(包含 tab-pane )。

使用 id href 属性将标签导航与标签内容连接起来。

在下面的示例中,标签1 在第一个示例中使用 href =“#ex1-tabs-1” nav-link 元素将其与第一个 tab-pane 相连,该元素具有一个 ID ex1-tabs-1

Tab 1 content
Tab 2 content
Tab 3 content

          <!-- Tabs navs -->
          <ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
            <li class="nav-item" role="presentation">
              <a
                class="nav-link active"
                id="ex1-tab-1"
                data-mdb-toggle="tab"
                href="#ex1-tabs-1"
                role="tab"
                aria-controls="ex1-tabs-1"
                aria-selected="true"
                >Tab 1</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="ex1-tab-2"
                data-mdb-toggle="tab"
                href="#ex1-tabs-2"
                role="tab"
                aria-controls="ex1-tabs-2"
                aria-selected="false"
                >Tab 2</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="ex1-tab-3"
                data-mdb-toggle="tab"
                href="#ex1-tabs-3"
                role="tab"
                aria-controls="ex1-tabs-3"
                aria-selected="false"
                >Tab 3</a
              >
            </li>
          </ul>
          <!-- Tabs navs -->

          <!-- Tabs content -->
          <div class="tab-content" id="ex1-content">
            <div
              class="tab-pane fade show active"
              id="ex1-tabs-1"
              role="tabpanel"
              aria-labelledby="ex1-tab-1"
            >
              Tab 1 content
            </div>
            <div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
              Tab 2 content
            </div>
            <div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
              Tab 3 content
            </div>
          </div>
          <!-- Tabs content -->
        

填写并证明

强制您的 .nav 的内容扩展两个修饰符之一的全部可用宽度 类。

要用 .nav-item s按比例填充所有可用空间,请使用 .nav-fill 。请注意,所有水平空间都被占用,但不是每个导航项都被占用 具有相同的宽度。

Tab 1 content
Tab 2 content
Tab 3 content

            <!-- Tabs navs -->
            <ul class="nav nav-tabs nav-fill mb-3" id="ex1" role="tablist">
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link active"
                  id="ex2-tab-1"
                  data-mdb-toggle="tab"
                  href="#ex2-tabs-1"
                  role="tab"
                  aria-controls="ex2-tabs-1"
                  aria-selected="true"
                  >Link</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="ex2-tab-2"
                  data-mdb-toggle="tab"
                  href="#ex2-tabs-2"
                  role="tab"
                  aria-controls="ex2-tabs-2"
                  aria-selected="false"
                  >Very very very very long link</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="ex2-tab-3"
                  data-mdb-toggle="tab"
                  href="#ex2-tabs-3"
                  role="tab"
                  aria-controls="ex2-tabs-3"
                  aria-selected="false"
                  >Another link</a
                >
              </li>
            </ul>
            <!-- Tabs navs -->

            <!-- Tabs content -->
            <div class="tab-content" id="ex2-content">
              <div
                class="tab-pane fade show active"
                id="ex2-tabs-1"
                role="tabpanel"
                aria-labelledby="ex2-tab-1"
              >
                Tab 1 content
              </div>
              <div
                class="tab-pane fade"
                id="ex2-tabs-2"
                role="tabpanel"
                aria-labelledby="ex2-tab-2"
              >
                Tab 2 content
              </div>
              <div
                class="tab-pane fade"
                id="ex2-tabs-3"
                role="tabpanel"
                aria-labelledby="ex2-tab-3"
              >
                Tab 3 content
              </div>
            </div>
            <!-- Tabs content -->
          

证明

对于等宽元素,请使用 .nav对齐。所有水平空间将是 被导航链接占用,但与上面的 .nav-fill 不同,每个导航项 相同的宽度。

Tab 1 content
Tab 2 content
Tab 3 content

            <!-- Tabs navs -->
            <ul class="nav nav-tabs nav-justified mb-3" id="ex1" role="tablist">
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link active"
                  id="ex3-tab-1"
                  data-mdb-toggle="tab"
                  href="#ex3-tabs-1"
                  role="tab"
                  aria-controls="ex3-tabs-1"
                  aria-selected="true"
                  >Link</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="ex3-tab-2"
                  data-mdb-toggle="tab"
                  href="#ex3-tabs-2"
                  role="tab"
                  aria-controls="ex3-tabs-2"
                  aria-selected="false"
                  >Very very very very long link</a
                >
              </li>
              <li class="nav-item" role="presentation">
                <a
                  class="nav-link"
                  id="ex3-tab-3"
                  data-mdb-toggle="tab"
                  href="#ex3-tabs-3"
                  role="tab"
                  aria-controls="ex3-tabs-3"
                  aria-selected="false"
                  >Another link</a
                >
              </li>
            </ul>
            <!-- Tabs navs -->

            <!-- Tabs content -->
            <div class="tab-content" id="ex2-content">
              <div
                class="tab-pane fade show active"
                id="ex3-tabs-1"
                role="tabpanel"
                aria-labelledby="ex3-tab-1"
              >
                Tab 1 content
              </div>
              <div
                class="tab-pane fade"
                id="ex3-tabs-2"
                role="tabpanel"
                aria-labelledby="ex3-tab-2"
              >
                Tab 2 content
              </div>
              <div
                class="tab-pane fade"
                id="ex3-tabs-3"
                role="tabpanel"
                aria-labelledby="ex3-tab-3"
              >
                Tab 3 content
              </div>
            </div>
            <!-- Tabs content -->
          

垂直

通过使用更改弹性项目方向来堆叠导航 .flex-column 实用程序。是否需要将它们堆叠在某些视口上,而不是其他视口上?采用 响应版本(例如 .flex-sm-column )。

为了获得正确的布局,您可能还需要使用网格来调整导航和内容。

Home content
Profile content
Messages content

          <div class="row">
            <div class="col-3">
              <!-- Tab navs -->
              <div
                class="nav flex-column nav-tabs text-center"
                id="v-tabs-tab"
                role="tablist"
                aria-orientation="vertical"
              >
                <a
                  class="nav-link active"
                  id="v-tabs-home-tab"
                  data-mdb-toggle="tab"
                  href="#v-tabs-home"
                  role="tab"
                  aria-controls="v-tabs-home"
                  aria-selected="true"
                  >Home</a
                >
                <a
                  class="nav-link"
                  id="v-tabs-profile-tab"
                  data-mdb-toggle="tab"
                  href="#v-tabs-profile"
                  role="tab"
                  aria-controls="v-tabs-profile"
                  aria-selected="false"
                  >Profile</a
                >
                <a
                  class="nav-link"
                  id="v-tabs-messages-tab"
                  data-mdb-toggle="tab"
                  href="#v-tabs-messages"
                  role="tab"
                  aria-controls="v-tabs-messages"
                  aria-selected="false"
                  >Messages</a
                >
              </div>
              <!-- Tab navs -->
            </div>

            <div class="col-9">
              <!-- Tab content -->
              <div class="tab-content" id="v-tabs-tabContent">
                <div
                  class="tab-pane fade show active"
                  id="v-tabs-home"
                  role="tabpanel"
                  aria-labelledby="v-tabs-home-tab"
                >
                  Home content
                </div>
                <div
                  class="tab-pane fade"
                  id="v-tabs-profile"
                  role="tabpanel"
                  aria-labelledby="v-tabs-profile-tab"
                >
                  Profile content
                </div>
                <div
                  class="tab-pane fade"
                  id="v-tabs-messages"
                  role="tabpanel"
                  aria-labelledby="v-tabs-messages-tab"
                >
                  Messages content
                </div>
              </div>
              <!-- Tab content -->
            </div>
          </div>
        

标签 - API


用法

关于可访问性

如果您使用导航来提供导航栏,请确保添加一个 role="navigation" 到最逻辑的父容器 <ul>, 或包装一个 <nav> 整个元素 导航。不要将角色添加到 <ul>本身,因为这样可以防止 不会被辅助技术宣布为实际清单。

请注意,导航栏即使使用 .nav-tabs 类,应该 role =“ tablist” role =“ tab” role =“ tabpanel” 属性。这些仅适用于动态选项卡式 接口,如 WAI ARIA 创作习惯。在动态选项卡式界面上,不需要 aria-current 属性,因为 我们的JavaScript通过在代码中添加 aria-selected =“ true” 来处理选定状态 活动标签。

通过数据属性

您只需指定以下内容即可激活选项卡或药丸导航,而无需编写任何JavaScript 元素上的 data-mdb-toggle =“标签” data-mdb-toggle =“ pill” 。采用 这些数据属性位于 .nav-tabs .nav-pills 上。


          <!-- Nav tabs -->
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <a
                class="nav-link active"
                id="home-tab"
                data-mdb-toggle="tab"
                href="#home"
                role="tab"
                aria-controls="home"
                aria-selected="true"
                >Home</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="profile-tab"
                data-mdb-toggle="tab"
                href="#profile"
                role="tab"
                aria-controls="profile"
                aria-selected="false"
                >Profile</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="messages-tab"
                data-mdb-toggle="tab"
                href="#messages"
                role="tab"
                aria-controls="messages"
                aria-selected="false"
                >Messages</a
              >
            </li>
            <li class="nav-item" role="presentation">
              <a
                class="nav-link"
                id="settings-tab"
                data-mdb-toggle="tab"
                href="#settings"
                role="tab"
                aria-controls="settings"
                aria-selected="false"
                >Settings</a
              >
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
              ...
            </div>
            <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
              ...
            </div>
            <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">
              ...
            </div>
            <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
              ...
            </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

          const triggerFirstTabEl = document.querySelector('#myTab li:first-child a');
          mdb.Tab.getInstance(triggerFirstTabEl).show(); // Select first tab
        

通过jQuery

注意:默认情况下,MDB 包含jQuery,并且您拥有 自行添加到项目中。


          $('.example-class').tab();
        

方法

异步方法和转换:
所有API方法都是异步并开始过渡。 转换开始后,他们会立即返回给呼叫者,但 在结束之前。另外,在 转换组件将被忽略

Name Description Example
show Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.mdb.tab event occurs). instance.show()
dispose Destroys an element’s tab. instance.dispose()

          const someTabTriggerEl = document.querySelector('#someTabTrigger');
          const tab = new mdb.Tab(someTabTriggerEl) 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)

If no tab was already active, then the hide.mdb.tab and hidden.mdb.tab events will not be fired.

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="tab"]');
          tabEl.addEventListener('shown.mdb.tab', (event) => {
            event.target; // newly activated tab
            event.relatedTarget; // previous active tab
          })
        

进口

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


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