Блог

В настоящее время я использую 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>
 

Как мне сделать заголовок вкладки липким на месте, чтобы всякий раз, когда я прокручиваю вкладку, вкладки всегда были сверху? Спасибо большое

Вы можете использовать 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>