5

[Vue.js] Tab Panel

 2 years ago
source link: http://siongui.github.io/2017/05/16/vuejs-tab-panel/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

[Vue.js] Tab Panel

May 16, 2017

Tab panel implementation via Vue.js and CSS. The tab panel here is similar to Bootstrap tab. Click the following tabs to see the demo.

The following is the source code for above demo.

HTML:

<div id="vueapp">

<div>

  <!-- Nav tabs -->
  <ul class="nav-tabs">
    <li><a v-on:click="tabsel = 'home'">Home</a></li>
    <li><a v-on:click="tabsel = 'profile'">Profile</a></li>
    <li><a v-on:click="tabsel = 'messages'">Messages</a></li>
    <li><a v-on:click="tabsel = 'settings'">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane" v-show="tabsel == 'home'">My home</div>
    <div class="tab-pane" v-show="tabsel == 'profile'">My profile</div>
    <div class="tab-pane" v-show="tabsel == 'messages'">My messages</div>
    <div class="tab-pane" v-show="tabsel == 'settings'">My settings</div>
  </div>

</div>

</div>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

We use the variable tabsel to indicate current selected tab. When users click on the tab, update tabsel and hence show the selected tab pane according to the value of tabsel.

JavaScript:

'use strict';

var app = new Vue({
  el: '#vueapp',
  data: {
    tabsel: "home"
  }
});

Set tabsel to home in the initialization phase to make the home tab as default tab.

CSS:

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  list-style: none;
}
.nav-tabs > li {
  margin-bottom: 1px;
  margin-right: 1rem;
  line-height: 2rem;
}
.nav-tabs > li > a {
  cursor: pointer;
  text-decoration: none;
}
.tab-pane {
  padding: 1rem;
}

Use flexbox to align the tabs in one row.

Tested on:

  • Chromium 58.0.3029.96 Built on Ubuntu 17.04 (64-bit)
  • Vue.js 2.3.3

References:

[1]bootstrap/_nav.scss at v4-dev · twbs/bootstrap · GitHub

[2]Class and Style Bindings — Vue.js


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK