超簡単にタブを実装する「vue-k-tabs」

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kevindesousa/[email protected]/dist/vue-k-tabs.css">
<div id="app">
  <k-tabs class="box">
    <k-tab name="Tab 1" :tags="[{ content:'タグ'},{ content:'タグ'}]" :selected="true">tab1</k-tab>
    <k-tab name="Tab 2">tab2</k-tab>
    <k-tab name="Tab 3">tab3</k-tab>
    <k-tab name="Tab 4">tab4</k-tab>
  </k-tabs>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@kevindesousa/[email protected]/dist/vue-k-tabs.browser.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.box{
  border: solid 1px #dcdcdc;
  padding: 15px;
}

Vue

const KTabs = window.KTabs.default;

Vue.use(KTabs)
let app = new Vue({
  el: '#app',

});