Card

卡片组件 / Card组件

配合一起的子组件

组合关系如下, img的宽度为 width: 100%

<vm-card>
   <img src="">
   <vm-card-header>
        <vm-card-title>CardTitle</vm-card-title>
   </vm-card-header>
   <vm-card-content>
       <vm-card-title>CardTitle</vm-card-title>
       <p>CardContent</p>
   </vm-card-content>
</vm-card>

CardHeader

包裹Card的头部, 增加padding. 这里定义在内部的所有的结构都是的的单行, 且尾部自动加省略号.

CardTitle

表示title, 字体会大点

CardContent

增加内部内容的padding, 放置内容. 当然, 不是全部都放在这里, 放在外面也好.

如何引入

// 引入
import { Card, CardContent, CardHeader, CardTitle } from 'vimo/lib/card'
// 安装
Vue.component(Card.name, Card)
Vue.component(CardContent.name, CardContent)
Vue.component(CardHeader.name, CardHeader)
Vue.component(CardTitle.name, CardTitle)
// 或者
export default{
  components: {
    Card, CardContent, CardHeader, CardTitle
 }
}