vueitfy笔记之(1):cards卡片

在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以适应容器内部，而不是覆盖。