Sard Uniapp

Appearance

在新窗口打开⤴

Card卡片

介绍 ​

以矩形的形式呈现相关信息或内容，包含标题、内容和相关元素。

引入 ​

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+是否开启点击反馈booleanfalse
hide-header-border 1.20+是否隐藏头部边框booleanfalse
hide-footer-border 1.20+是否隐藏底部边框booleanfalse
collapsed 1.24+是否折叠booleanfalse

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);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao