vueitfy笔记之(1):cards卡片
在vueitfy的UI components(也就是UI组件)下面有个cards就是卡片。1、v-card卡片 v-card组件是一个多功能组件,可用于从面板到静态图像的任何事物。card组件有许多班助组件,使标记尽可能简单。没有列出选项的组件使用Vue的功能组件选项来加快渲染速度,并作为标记糖来使构建更容易。一个卡片有四个基本组件,v-card-media、v-card-tit...
·
在vueitfy的UI components(也就是UI组件)下面有个cards就是卡片。
1、v-card卡片
v-card组件是一个多功能组件,可用于从面板到静态图像的任何事物。card组件有许多班助组件,使标记尽可能简单。没有列出选项的组件使用Vue的功能组件选项来加快渲染速度,并作为标记糖来使构建更容易。
一个卡片有四个基本组件,v-card-media、v-card-title、v-card-text和v-card-actions。卡片v-card包含四个基本组件说明:
(1)v-card-media:一般放图片或视频;
(2)v-card-title:卡片的标题,一般位于卡片顶部;
(3)v-card-text:卡片的文本(主体内容),一般位于卡片正中;
(4)v-card-action:卡片的按钮,一般位于卡片底部;
<v-card>
<!-- 卡片的头部 -->
<v-card-title>
<v-btn color="primary">新增</v-btn>
</v-card-title>
<!-- 分割线 -->
<v-divider/>
<!--卡片的中部-->
<v-data-table
:headers="headers"
:items="brands"
:search="search"
:pagination.sync="pagination"
:total-items="totalBrands"
:loading="loading"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.id }}</td>
<td class="text-xs-center">{{ props.item.name }}</td>
<td class="text-xs-center"><img :src="props.item.image"></td>
<td class="text-xs-center">{{ props.item.letter }}</td>
<td class="justify-center layout">
<v-btn color="info">编辑</v-btn>
<v-btn color="warning">删除</v-btn>
</td>
</template>
</v-data-table>
</v-card>
2、水平的卡片v-flex
使用v-flex,您可以创建自定义的水平卡片。使用contain属性来缩小v-card-media以适应容器内部,而不是覆盖。
更多推荐
已为社区贡献12条内容
所有评论(0)