2020-02-03 21:48:56 +08:00
|
|
|
# 卡片 Card
|
2020-12-12 14:44:44 +08:00
|
|
|
|
2020-03-14 17:48:54 +08:00
|
|
|
一些经验不足的 UI 设计师喜欢在它上面滥用阴影。
|
2020-09-26 23:43:12 +08:00
|
|
|
|
2020-02-03 20:49:22 +08:00
|
|
|
## 演示
|
2020-12-12 14:44:44 +08:00
|
|
|
|
2019-12-02 03:16:35 +08:00
|
|
|
```demo
|
|
|
|
|
basic
|
|
|
|
|
size
|
|
|
|
|
cover
|
|
|
|
|
slots
|
|
|
|
|
border
|
|
|
|
|
segment
|
|
|
|
|
closable
|
|
|
|
|
```
|
2020-09-26 23:43:12 +08:00
|
|
|
|
2020-02-03 20:49:22 +08:00
|
|
|
## Props
|
2020-12-12 14:44:44 +08:00
|
|
|
|
|
|
|
|
| 名称 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
|
| bordered | `boolean` | `true` | |
|
|
|
|
|
| closable | `boolean` | `false` | |
|
|
|
|
|
| content-style | `Object \| string` | `undefined` | |
|
|
|
|
|
| header-style | `Object \| string` | `undefined` | |
|
|
|
|
|
| segmented | `boolean \| { [part in 'content' \| 'footer' \| 'action']?: boolean \| 'soft' \| 'hard' }` | `false` | |
|
|
|
|
|
| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | |
|
|
|
|
|
| themed-style | `{ [themeName: string]: Object }` | `undefined` | |
|
|
|
|
|
| theme | `'light' \| 'dark' \| string` | `undefined` | |
|
|
|
|
|
| title | `string` | `undefined` | |
|
|
|
|
|
| on-close | `() => any` | `undefined` | 点击卡片关闭图标时的回调 |
|
2020-02-03 20:49:22 +08:00
|
|
|
|
|
|
|
|
## Slots
|
2020-12-12 14:44:44 +08:00
|
|
|
|
|
|
|
|
| 名称 | 参数 | 说明 |
|
|
|
|
|
| ------------ | ---- | ---- |
|
|
|
|
|
| cover | `()` | |
|
|
|
|
|
| header | `()` | |
|
|
|
|
|
| header-extra | `()` | |
|
|
|
|
|
| default | `()` | |
|
|
|
|
|
| footer | `()` | |
|
|
|
|
|
| action | `()` | |
|
