Vuetify

Vuetify

Vue |

Layout

v-icon

• 利用可能なアイコン
  • https://material.io/tools/icons/?style=baseline

v-card

• Reference
  • https://vuetifyjs.com/ja/components/cards
• Tutorial
• https://www.youtube.com/watch?v=pUwyeWLOnP4&list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5&index=19
• パネルから画像まであらゆる用途に使用できる汎用的なコンポーネント
• card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在

<template>
  <v-container class="my-5">
    <v-layout row wrap>
      <v-flex xs12 sm6 md4 lg3 v-for="n in num" :key="n.key">
       <v-card flat class="text-xs-center ma-3">
          <v-responsive class="pt-4">
            image goes here
          </v-responsive>
          <v-card-tesxt>
            <div class="subheading">テンプレート:N.value</div>
            <div class="gray--text">hello</div>
          </v-card-tesxt>          
          <v-card-action>
            <v-btn flat color="gray">
              <v-icon small left>message</v-icon>
              <span>message</span>
            </v-btn>
          </v-card-action>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>
<script>
 
export default {
  name: 'Home',
  data() {
    return {
      num: [
        {key:1,value:'one'},
        {key:2,value:'twe'},
        {key:3,value:'three'},
        {key:4,value:'four'},
        {key:5,value:'five'},
      ]
    }
  },