# Card 卡片容器

请扫码查看示例

# 介绍

卡片容器，可承载文字、列表、图片、段落等。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-card" src="@/node_modules/mui-minix/src/card/index"></element>
<m-card>
  <div class="placeholder"></div>
</m-card>

1
2
3
4

.placeholder{
  height: 200px;
}

1
2
3

# 可选中

通过设置设置 selectable 为 true,可以开启卡片可选中功能。

通过配置 tag-position 可以控制卡片选中的标记位置。支持 left right。默认为 left。

通过配置 selected 可以控制卡片是否选中。默认为 false。

<element name="m-card" src="@/node_modules/mui-minix/src/card/index"></element>
<div>
  <m-card selectable="{{true}}" selected="{{select1}}" @m-select="onSelect1">
    <div class="placeholder"></div>
  </m-card>
  <m-card class="m-t-10" selectable="{{true}}" selected="{{select2}}" tag-position="left" @m-select="onSelect2">
    <div class="placeholder"></div>
  </m-card>
</div>

1
2
3
4
5
6
7
8
9

export default {
  data(){
    return {
      select1: true,
      select2: true
    }
  },
  onSelect1(e){
    this.select1 = e.detail
  },
  onSelect2(e){
    this.select2 = e.detail
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.placeholder{
  height: 200px;
}

1
2
3

# Api

# Prop

字段	说明	类型	默认值	是否必须
`selectable`	是否可选中	`boolean`	`false`	`否`
`selected`	是否选中	`boolean`	`false`	`否`
`tab-position`	选中的图标位置	`string`	`right`	`否`
`background-color`	背景颜色	`string`	`#ffffff`	`否`
`active-background-color`	点击时的背景颜色,设置了 `advance` 有效	`string`	`#f2f2f2`	`否`
`advance`	是否开启点击时改变背景颜色	`boolean`	`false`	`否`
`border-radius`	圆角	`number`	`16`	`否`
`padding-left`	左侧留白	`number`	`16`	`否`
`padding-right`	右侧留白	`number`	`16`	`否`
`padding-top`	上侧留白	`number`	`0`	`否`
`padding-bottom`	下侧留白	`number`	`0`	`否`

# Events

名称	说明	回调参数
`m-select`	开启了可选中,点击时触发	`-`