时间戳

首页 > 解决方案 > 如何使用 bootstrap-vue 将标签标题设置在顶部

tabs - 如何使用 bootstrap-vue 将标签标题设置在顶部

问题描述

我目前正在使用 bootstrap-vue 来构建一个带有多个选项卡的页面。简而言之，这是代码

<div id="app">
  <template>
    <div>
      <b-tabs content-class="mt-3 ml-3">
        <b-tab title="Settings">
          <div class="col-md-4">
            <h2>Hello</h2>
          </div>
        <b-tab>
        <b-tab title="Question">
          <div class="col-md-4">
            <h2>World</h2>
          </div>
        <b-tab>
      </b-tabs>
    </div>
  </template>
</div>

如何使选项卡标题粘在适当的位置，因此每当我在选项卡内滚动时，选项卡将始终位于顶部？非常感谢你

标签： tabsbootstrap-vue

解决方案

您可以通过添加到来使用sticky-top该类。这将进行导航，并将随页面滚动。nav-wrapper-class="sticky-top"<b-tabs>sticky

根据您的设置，您可能需要为导航添加背景颜色，以避免在导航下方看到选项卡内容，因为默认情况下它是透明的。这就是我bg-light在示例中使用的原因。

new Vue({
  el: '#app'
})
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>



<div id="app" class="p-5">
  <b-card no-body>
    <b-tabs content-class="mt-3 ml-3" nav-wrapper-class="sticky-top bg-light" card>
      <b-tab title="Settings">
        <div class="col-md-4">
          <h2 v-for="i in 15">Hello</h2>
        </div>
      </b-tab>
      <b-tab title="Question">
        <div class="col-md-4">
          <h2>World</h2>
        </div>
      </b-tab>
    </b-tabs>
  </b-card>

  <br v-for="i in 25" />
</div>

或者，您可以改为向选项卡内容添加滚动条（在需要时）。意味着导航保持在视线范围内。

new Vue({
  el: '#app'
})
.custom-class {
  max-height: 300px;
  overflow-y: auto;
}
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>



<div id="app" class="p-5">
  <b-card no-body>
    <b-tabs content-class="pt-3 pl-3 custom-class" card>
      <b-tab title="Settings">
        <div class="col-md-4">
          <h2 v-for="i in 15">Hello</h2>
        </div>
      </b-tab>
      <b-tab title="Question">
        <div class="col-md-4">
          <h2>World</h2>
        </div>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

推荐阅读