「Vuetify」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==Vuetify== [Vue] ==Layout== ====v-icon==== *利用可能なアイコン **https://material.io/tools/icons/?style=baseline ===v-card=== *Reference **https://v…」) |
|||
(同じ利用者による、間の2版が非表示) | |||
1行目: | 1行目: | ||
− | ==Vuetify== | + | ==[[Vuetify]]== |
− | [Vue] | + | [[Vue]] | |
==Layout== | ==Layout== | ||
8行目: | 8行目: | ||
===v-card=== | ===v-card=== | ||
− | * | + | *[[R]]eference |
**https://vuetifyjs.com/ja/components/cards | **https://vuetifyjs.com/ja/components/cards | ||
*Tutorial | *Tutorial | ||
15行目: | 15行目: | ||
*card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在 | *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 | 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 { | export default { |
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 矢木浩人