Vue vue-accordion

by kabanoki

HTML

<script src="https://unpkg.com/vue-accordion"></script>
<div id="app">
    <vue-accordion :items="items"></vue-accordion>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

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

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('vue-accordion', vueAccordion)
new Vue({
  el: "#app",
    data:{
      items: [
          {
              title: '「Vue-Awesome」で1500種類のSVG アイコンを使用する',
              text: 'SVG iconsコンポーネントライブラリです。Font AwesomeのSVGアイコンを1500個以上使用できます。コピペで実装できるサンプルを公開してます。',
              url: 'https://www.kabanoki.net/4257/',
              image: 'https://i1.wp.com/www.kabanoki.net/wp-content/uploads/2019/07/5cb5cfeb-f1cf-4e47-ac2c-ff53b702b2c0.png?resize=512%2C350&ssl=1'
          },
          {
              title: '「Vuelidate」でVue.js専用のバリデーションを実装する',
              text: 'VuelidateでVue.js専用のバリデーションを実装します。コピペで実装できるサンプルも掲載しています。',
              url: 'https://www.kabanoki.net/4210/',
              image: 'https://i0.wp.com/www.kabanoki.net/wp-content/uploads/2019/07/vuelidate-30.png?w=616&ssl=1'
          },
          {
              title: '「vue-chartjs」でグラフィカルなチャートを実装する',
              text: '「vue-chartjs」はVue.js製のグラフィカルチャートを実装するライブラリです。元々は「Chart.js」というGithubのスター 40,000 を超えるグラフィカルチャートライブラリです。コピペで使えるサンプルを公開しています。',
              url: 'https://www.kabanoki.net/4118/',
              image: 'https://i1.wp.com/www.kabanoki.net/wp-content/uploads/2019/06/c6a29945-843e-417b-a938-2d6c2236ac64.png?resize=512%2C350&ssl=1'
          },
          {
              title: 'Vue.jsでSliderを使うなら「hooper」が良さげ',
              text: '「Hooper」はVue用に最適化され、カスタマイズ可能なカルーセルスライダーです。コピペで実装できるサンプルを公開しています。',
              url: 'https://www.kabanoki.net/3989/',
              image: 'https://i1.wp.com/www.kabanoki.net/wp-content/uploads/2019/06/hooper-17.png'
          }
      ]
    }
})