アコーディオン vue-bulma-accordion
<script src="https://cdn.jsdelivr.net/npm/vue-bulma-accordion@0.4.8/dist/vue-bulma-accordion.umd.min.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet"></link>
<bulma-accordion initial-open-item="1">
<bulma-accordion-item>
<h4 slot="title">タブ1</h4>
<article slot="content">
タブの文章はここ
</article>
</bulma-accordion-item>
<bulma-accordion-item>
<h4 slot="title">タブ2</h4>
<article slot="content">
タブの文章はここ
</article>
</bulma-accordion-item>
<bulma-accordion-item>
<h4 slot="title">タブ3</h4>
<article slot="content">
タブの文章はここ
</article>
</bulma-accordion-item>
</bulma-accordion>
initial-open-itemは最初に開くタブ
これを空にしておくと、エラーが出る。
bulma.min.cssは、余計なhtmlが多く、ページデザインが変わってしまうのでDownloadした後、余計なセレクタを削除したほうがいい。
let app = new Vue({
el: '#app',
components: {
BulmaAccordion,
BulmaAccordionItem
}
});