vuejs+bs(5.0) tabs(頁籤)

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

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://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div id="vapp">
  <div style="margin:20px;">
    <!--外框調整色系-->
    <!--<div class="card text-center border-primary mb-3 ">-->
    <div class="card text-center panel-info" >
    <!--headerzone調整背景色系、字體色系-->
  <!--<div class="card-header bg-primary text-white">-->
  <div class="card-header panel-info-header" >
    <ul class="nav nav-tabs card-header-tabs" >
      <li  class="nav-item">
        <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'nav-link active' : 'nav-link' ]" href="#" class="panel-info-font"><i class="fa fa-binoculars"></i> CheckList</a>
      </li>
      <li class="nav-item">
        <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'nav-link active' : 'nav-link' ]" href="#" class="panel-info-font"><i class="fa fa-bar-chart"></i> Rates</a>
      </li>
      <li class="nav-item">
        <a v-on:click="activetab=3" v-bind:class="[ activetab === 3 ? 'nav-link active' : 'nav-link' ]" href="#" class="panel-info-font"><i class="fa fa-cog"></i> Settings</a>
        <!--style="color: #337ab7;"-->
      </li>
    </ul>
  </div>
  <div class="card-body" v-if="activetab === 1" >
    <div style="text-align:left;">
      Zone1 Content<br/>
      Zone1 Content<br/>
      Zone1 Content<br/>
      Zone1 Content<br/>
      Zone1 Content<br/>
    </div>    
  </div>
  <div class="card-body" v-if="activetab === 2" >
    <div style="text-align:left;">
     ...

CSS

/* bootstrap tab styles */
.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;
}
/*---自訂 s---*/
/*備註：panel-default/primary/success/warning/danger若要使用亦須自定義此區塊兩項色系;自訂色系乃因bs5色系大改,不愛,較偏愛bs3.3.7時之淺色系*/
/*備註：若要新增色系，請打開以下連結並參考以下幾個標註的部分之顏色去新增css
reference demo: https://codepen.io/doganuc4r/pen/EQJWgm
color: #31708f
backgroundcolor: #d9edf7(reference this!)
bordercolor: #bce8f1
a color: #337ab7(reference this!)
active a bordercolor: #C1E8F2(reference this!)
*/
/*淺藍*/
.panel-info{
  border-color:#C1E8F2 !important;
}
.panel-info-header{
  background-color:#d9edf7 !important;
}
.panel-info-font{
  color: #337ab7 !important;
}
/*淺綠*/
.panel-success{
  border-color: #D8E9C5 !important;
}
.panel-success-header{
  background-color: #dff0d8 !important;
}
.panel-success-font{
  color:#67B857 !important;
}
/*---自訂 e---*/

/* Colors */
.card.panel-default .card-heading .nav.nav-tabs li a { color: #555; }
.card.panel-default .card-heading .nav.nav-tabs li.active a { border-color:#DDDDDD;}
.card.panel-primary .card-heading .nav.nav-tabs li a { color: #FFF; }
.card.panel-primary .card-heading .nav.nav-tabs li.active a { color:#407AB9; }
.card.panel-success .card-heading .nav.nav-tabs li a { color:#67B857; }
.card.panel-success .card-heading .nav.nav-tabs li.active a { border-color:#D8E9C5;}
.card.panel-warning .card-heading .nav.nav-tabs li a { color: #8a6d3b; }
.card.panel-warning .card-heading .nav.nav-tabs li.active a { border-color:#F8EBCB;}
.card.panel-danger...

JavaScript

/* ref: bs5官網(card)component
   bootstrap = 5.0.0  fontawesome = 4.7 vuejs = 2.6.12
   notes: bs5無panel元件了,且官網提供之card使用方式與bs3.7.7有差異,故css與bs3.7.7之版本有差異
*/
var appinstance = new Vue({
	el:'#vapp',
  data:{
  	msg: 'test',
    activetab: 1,
  },
  computed:{
  
  },
  methods:{
  	initialize(){
    	this.activetab = 1;
    }
  },
  created(){
  	this.initialize();
  }
});