介绍
以矩形的形式呈现相关信息或内容,包含标题、内容和相关元素。
引入
js
import Card from 'sard-uniapp/components/card/card.vue'代码演示
基础使用
展示带标题和内容的卡片。
vue
<template>
<sar-card title="Trumpet to the Son of Heaven">
{{ content }}
</sar-card>
</template>
<script lang="ts" setup>
import { content } from './shared'
</script>基础使用
设置 extra 属性可以在标题右边放置额外内容。
vue
<template>
<sar-card
title="Trumpet to the Son of Heaven"
extra="Wang Pan [Ming Dynasty]"
>
{{ content }}
</sar-card>
</template>
<script setup lang="ts">
import { content } from './shared'
</script>只有主体
如果不设置标题和额外内容,则不会渲染头部。
vue
<template>
<sar-card>
{{ content }}
</sar-card>
</template>
<script setup lang="ts">
import { content } from './shared'
</script>底部
可以设置 footer 属性在主体下面放置内容。
vue
<template>
<sar-card
title="Trumpet to the Son of Heaven"
footer="Wang Pan is known as the champion of Nanqu. Ming Dynasty Sanqu writer, painter, also known as medicine."
>
{{ content }}
</sar-card>
</template>
<script setup lang="ts">
import { content } from './shared'
</script>可点击的
设置 hover 属性会有点击状态。
vue
<template>
<sar-card title="Trumpet to the Son of Heaven" hover @click="onClick">
{{ content }}
</sar-card>
</template>
<script setup lang="ts">
import { content } from './shared'
const onClick = () => {
console.log('click')
}
</script>vue
<template>
<sar-card title="Trumpet to the Son of Heaven" hover @click="onClick">
{{ content }}
</sar-card>
</template>
<script setup lang="js">
const onClick = () => {
console.log("click");
};
</script>自定义样式
可以通过 css 变量自定义卡片样式。
vue
<template>
<sar-card
root-style="
--sar-card-bg: var(--sar-danger);
--sar-card-border-color: white;
--sar-card-active-bg: rgba(var(--sar-danger-rgb), 0.9);
--sar-card-footer-border-style: dashed;
--sar-card-border-width: 2px;
color: white;
"
hover
title="Trumpet to the Son of Heaven"
footer="Wang Pan is known as the champion of Nanqu. Ming Dynasty Sanqu writer, painter, also known as medicine."
>
{{ content }}
</sar-card>
<sar-card
class="mt-30"
style="--sar-card-border-left: 96rpx; --sar-card-border-right: 32rpx"
hover
>
<template #title>
<view class="flex">
<view class="w-64 text-primary">
<sar-icon name="pencil-square" size="36rpx" />
</view>
<view>
<view class="font-bold">
<text>实施安装工单</text>
<text class="ml-10">GB20250627</text>
</view>
<view class="text-primary text-sm mt-10">待评价</view>
</view>
</view>
</template>
<view class="flex ml-64">
<view class="flex flex-col gap-10">
<view class="flex">
<view class="stext-tertiary w-140">机构</view>
<view>广州天河妇幼保健院</view>
</view>
<view class="flex">
<view class="stext-tertiary w-140">创建时间</view>
<view>2025-06-27 22:25:46</view>
</view>
<view class="flex">
<view class="stext-tertiary w-140">负责人</view>
<view>张三</view>
</view>
</view>
</view>
</sar-card>
</template>
<script lang="ts" setup>
import { content } from './shared'
</script>折叠 1.24+
可使用 collapsed 属性设置卡片折叠,折叠时将隐藏主体和底部,只显示头部。
vue
<template>
<sar-card title="Trumpet to the Son of Heaven" :collapsed="collapsed">
<template #extra>
<sar-button
type="pale-text"
class="h-auto"
@click="collapsed = !collapsed"
>
<sar-icon size="32rpx" :name="collapsed ? 'down' : 'up'" />
</sar-button>
</template>
{{ content }}
</sar-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { content } from './shared'
const collapsed = ref(true)
</script>vue
<template>
<sar-card title="Trumpet to the Son of Heaven" :collapsed="collapsed">
<template #extra>
<sar-button
type="pale-text"
class="h-auto"
@click="collapsed = !collapsed"
>
<sar-icon size="32rpx" :name="collapsed ? 'down' : 'up'" />
</sar-button>
</template>
{{ content }}
</sar-card>
</template>
<script setup lang="js">
import { ref } from "vue";
const collapsed = ref(true);
</script>API
CardProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| title | 头部左边内容 | string | - |
| extra | 头部右边内容 | string | - |
| footer | 底部内容 | string | - |
| hover 1.12.3+ | 是否开启点击反馈 | boolean | false |
| hide-header-border 1.20+ | 是否隐藏头部边框 | boolean | false |
| hide-footer-border 1.20+ | 是否隐藏底部边框 | boolean | false |
| collapsed 1.24+ | 是否折叠 | boolean | false |
CardSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |
| title | 自定义标题内容 | - |
| extra | 自定义额外内容 | - |
| footer | 自定义底部内容 | - |
CardEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| click 1.12.2+ | 点击卡片时触发 | (event: any) => void |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-card-border-radius: var(--sar-rounded-lg);
--sar-card-bg: var(--sar-emphasis-bg);
--sar-card-active-bg: var(--sar-active-bg);
--sar-card-header-padding-y: 20rpx;
--sar-card-header-padding-x: 32rpx;
--sar-card-title-font-size: var(--sar-text-lg);
--sar-card-title-line-height: var(--sar-leading-normal);
--sar-card-body-padding-y: 20rpx;
--sar-card-body-padding-x: 32rpx;
--sar-card-footer-padding-y: 20rpx;
--sar-card-footer-padding-x: 32rpx;
--sar-card-border-color: var(--sar-border-color);
// 1.20+
--sar-card-border-style: var(--sar-border-style);
--sar-card-border-width: var(--sar-border-width);
--sar-card-border-left: 0px;
--sar-card-border-right: 0px;
// 可覆盖 1.20+
// --sar-card-header-border-color: var(--sar-card-border-color);
// --sar-card-header-border-style: var(--sar-card-border-style);
// --sar-card-header-border-width: var(--sar-card-border-width);
// --sar-card-footer-border-color: var(--sar-card-border-color);
// --sar-card-footer-border-style: var(--sar-card-border-style);
// --sar-card-footer-border-width: var(--sar-card-border-width);
}