「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 矢木浩人
