vuejs+bs(5.0) tabs(動態頁籤)

bootstrap = 5.0.2(card) fontawesome = 4.7 vuejs = 3.2.13

by cactus77kiki

HTML

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div id="app">  
  <div style="margin:20px;">
    <div class="card text-center panel-info" >
      <div class="card-header panel-info-header" >
        <!--tab-->
        <ul class="nav nav-tabs card-header-tabs" >
          <li class="nav-item" v-for="tab in tablist">
            <a v-on:click="activetab = tab.idx" v-bind:class="[ activetab === tab.idx ? 'nav-link active' : 'nav-link' ]" href="#" class="panel-info-font"><i v-bind:class="tab.icon"></i> {{tab.text}}</a>
          </li>          
        </ul>
      </div>
      <!--content-->
      <div class="card-body" >
        <div style="text-align:left;" >
         <!--把下面這一塊div改成slot,然後指定不同activetab對應內容
             ex:
             <div v-if="activetab === 1">ABC1</div>
             <div v-if="activetab === 2">ABC2</div>
             <div v-if="activetab === 3">ABC3</div>
         -->
         <div>
           Zone{{activetab}} Content<br/>
           Zone{{activetab}} Content<br/>
           Zone{{activetab}} Content<br/>
           Zone{{activetab}} Content<br/>
           Zone{{activetab}} Content<br/>
         </div>          
        </div> 
        
        <!--
        <div style="text-align:left;" v-if="activetab === 1" >
          Zone1 Content<br/>
          Zone1 Content<br/>
          Zone1 Content<br/>
          Zone1 Content<br/>
          Zone1 Content<br/>
        </div> 
        <div style="text-align:left;"...

CSS

.panel .panel-heading .nav.nav-tabs {
   position: relative;
   bottom: -5px;
   height: 29px;
   border: none;
   margin-top: -9px;
   margin-left: -9px;
}

.panel .panel-heading .nav.nav-tabs li a {
   height: 35px;
   line-height: 17px;
   border: 1px solid transparent;
}

.card .card-header .nav.nav-tabs li a:not(.active):hover,
.card .card-header .nav.nav-tabs li a:not(.active):focus {
   background: rgba(0, 0, 0, 0.05);
}

.card .card-header .nav.nav-tabs li.active a {
   border: 1px solid #407AB9;
   border-bottom-color: transparent !important;
   background: #FFF;
}

/*淺藍*/
.panel-info{
  border-color:#C1E8F2 !important;
}
.panel-info-header{
  background-color:#d9edf7 !important;
}
.panel-info-font{
  color: #337ab7 !important;
}

.card.panel-info-header .nav.nav-tabs li a { color: #337ab7 ; }
.card.panel-info-header .nav.nav-tabs li a.active { border-color:#C1E8F2 ; }

JavaScript

Vue.createApp({
    data(){
        return {            
            activetab: 1,
            tablist: [
            	{idx:1,text:'CheckList',icon:'fa fa-binoculars'},
              {idx:2,text:'Rates',icon:'fa fa-bar-chart'},
              {idx:3,text:'Settings',icon:'fa fa-cog'}
            ],
        }
    }
}).mount("#app")