HOME > Vue.js> ライブラリ

アコーディオン 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
  }
});