Vue.js + vue-tabs-component でTab を表示する
この記事は約 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
http://vue-tabs-component.spatie.be/最後まで
ご高覧いただきまして
有難うございました
