「Vuetify」の版間の差分
ナビゲーションに移動
検索に移動
1行目: | 1行目: | ||
==Vuetify== | ==Vuetify== | ||
− | [[Vue]] | + | [[Vue]] | |
==Layout== | ==Layout== |
2020年2月15日 (土) 08:40時点における版
Vuetify
Vue |
Layout
v-icon
v-card
- Reference
- 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'}, ] } },
© 2006 矢木浩人