卡片 card
演示地址
1) 集合
import card from 'vue-human/suites/card'
注：核心组件，已经包含在 core suites 内。
2) 组件目录
- mn-card
- mn-card-item
- mn-card-body
- mn-card-prefix
- mn-card-suffix
- mn-card-media
- mn-card-btns
3\） mn-card 组件
3.1 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| theme |
主题 |
string |
primary、inverse 或 glass |
primary |
| rounded |
是否在不同尺寸下均强制圆角的实现 |
boolean |
- |
false |
注：theme 属性设定为 glass 时将实现毛玻璃效果，但该效果仅仅在 Safari、iOS 游览器内可实现，所以当设定为该值时，如果是 Chrome 等游览器将会显示为 primary 的主题样式。
4) mn-card-item 组件
4.1 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| type |
类型 |
string |
undefined、link、arrow 或 cursor |
undefined |
| disabled |
click 事件是否失效，表现为禁用状态 |
boolean |
- |
false |
4.2 触发事件
| 事件名 |
说明 |
参数 |
| click |
点击事件 |
$event 和 this |
5) mn-card-body 组件
5.1 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| muted |
是否启用 is-muted 的样式 |
boolean |
- |
false |
| action |
是否启用 is-action 的样式 |
boolean |
- |
false |
6) mn-card-prefix 组件
混合自 mn-card-body，同上
7) mn-card-suffix 组件
混合自 mn-card-body，同上
无属性等配置
9) mn-card-btns 组件
9.1 属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| type |
类型 |
string |
undefined 或 column |
undefined |
10) 样式
10.1 变量
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| $mn-card-mobile-radius |
mobile 圆角 |
string |
- |
$mobile-radius |
| $mn-card-desktop-radius |
desktop 圆角 |
string |
- |
$desktop-radius |