sard-uniapp
Version:
sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库
97 lines (60 loc) • 2.6 kB
Markdown
title: Card
subtitle: 卡片
group: 数据展示
## 介绍
以矩形的形式呈现相关信息或内容，包含标题、内容和相关元素。
## 引入
```js
import Card from 'sard-uniapp/components/card/card.vue'
```
## 代码演示
### 基础使用
展示带标题和内容的卡片。
<<< @demo/card/demo/Basic.vue
### 基础使用
设置 `extra` 属性可以在标题右边放置额外内容。
<<< @demo/card/demo/Extra.vue
### 只有主体
如果不设置标题和额外内容，则不会渲染头部。
<<< @demo/card/demo/OnlyBody.vue
### 底部
可以设置 `footer` 属性在主体下面放置内容。
<<< @demo/card/demo/Footer.vue
### 可点击的
设置 `hover` 属性会有点击状态。
<<< @demo/card/demo/Hover.vue
### 自定义样式
可以通过 css 变量自定义卡片样式。
<<< @demo/card/demo/Style.vue
### 折叠 <sup>1.24+</sup>
可使用 `collapsed` 属性设置卡片折叠，折叠时将隐藏主体和底部，只显示头部。
<<< @demo/card/demo/Collapsed.vue
## API
### CardProps
| 属性 | 描述 | 类型 | 默认值 |
| ----------------------------------- | ---------------- | ---------- | ------ |
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| title | 头部左边内容 | string | - |
| extra | 头部右边内容 | string | - |
| footer | 底部内容 | string | - |
| hover <sup>1.12.3+</sup> | 是否开启点击反馈 | boolean | false |
| hide-header-border <sup>1.20+</sup> | 是否隐藏头部边框 | boolean | false |
| hide-footer-border <sup>1.20+</sup> | 是否隐藏底部边框 | boolean | false |
| collapsed <sup>1.24+</sup> | 是否折叠 | boolean | false |
### CardSlots
| 插槽 | 描述 | 属性 |
| ------- | -------------- | ---- |
| default | 自定义默认内容 | - |
| title | 自定义标题内容 | - |
| extra | 自定义额外内容 | - |
| footer | 自定义底部内容 | - |
### CardEmits
| 事件 | 描述 | 类型 |
| ------------------------ | -------------- | ---------------------- |
| click <sup>1.12.2+</sup> | 点击卡片时触发 | `(event: any) => void` |
## 主题定制
### CSS 变量
<<< @comp/card/variables.scss#variables