2ヶ月前に投稿

Vue.js + vue-tabs-component でTab を表示する

この記事は約 5 分で読めます。

4.5

vue-tabs-component は、
タブを簡単にレンダリングするための
Vue component です。

CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tabs-component@1.5.0/dist/index.min.js"></script>

HTML

<tabs :options="{ defaultTabHash: 'second-tab' }">
<tab id="first-tab" name="First tab"> First tab content </tab>
<tab id="second-tab" name="Default tab"> Second tab content </tab>
</tabs>

CSS

.tabs-component {
margin: 4em 0;
}
.tabs-component-tabs {
border: solid 1px #ddd;
border-radius: 6px;
margin-bottom: 5px;
}
@media (min-width: 700px) {
.tabs-component-tabs {
border: 0;
align-items: stretch;
display: flex;
justify-content: flex-start;
margin-bottom: -1px;
}
}
.tabs-component-tab {
color: #999;
font-size: 14px;
font-weight: 600;
margin-right: 0;
list-style: none;
}
.tabs-component-tab:not(:last-child) {
border-bottom: dotted 1px #ddd;
}
.tabs-component-tab:hover {
color: #666;
}
.tabs-component-tab.is-active {
color: #000;
}
.tabs-component-tab.is-disabled * {
color: #cdcdcd;
cursor: not-allowed !important;
}
@media (min-width: 700px) {
.tabs-component-tab {
background-color: #fff;
border: solid 1px #ddd;
border-radius: 3px 3px 0 0;
margin-right: .5em;
transform: translateY(2px);
transition: transform .3s ease;
}
.tabs-component-tab.is-active {
border-bottom: solid 1px #fff;
z-index: 2;
transform: translateY(0);
}
}
.tabs-component-tab-a {
align-items: center;
color: inherit;
display: flex;
padding: .75em 1em;
text-decoration: none;
}
.tabs-component-panels {
padding: 4em 0;
}
@media (min-width: 700px) {
.tabs-component-panels {
border-top-left-radius: 0;
background-color: #fff;
border: solid 1px #ddd;
border-radius: 0 6px 6px 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, .05);
padding: 4em 2em;
}
}

JavaScript

const Tabs = VueTabs.Tabs,
Tab = VueTabs.Tab;
new Vue({
el: '#app',
components: {
Tabs,
Tab
}
})

Result

This is the content of the first tab This is the content of the second tab This is the content of the third tab This content will be unavailable while :is-disabled prop set to true
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Vue.js + vue-tabs-component でTab を表示する

カスタマイズ - Vue.jsJS,Library,Reference,Vue.js

Posted by FOUR 4to6