「Vuetify」の版間の差分
ナビゲーションに移動
検索に移動
1行目: | 1行目: | ||
− | ==Vuetify== | + | ==[[Vuetify]]== |
[[Vue]] | | [[Vue]] | | ||
8行目: | 8行目: | ||
===v-card=== | ===v-card=== | ||
− | * | + | *[[R]]eference |
**https://vuetifyjs.com/ja/components/cards | **https://vuetifyjs.com/ja/components/cards | ||
*Tutorial | *Tutorial |
2020年2月16日 (日) 04:34時点における最新版
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 矢木浩人