Card(卡片)

概述

Card 是一个灵活的内容容器组件，用于展示信息块。支持多种样式、内容插槽、交互功能，适合用于仪表盘、列表项或其他内容展示场景。

预览

测试案例 1: 默认卡片

默认卡片

这是一个默认类型的卡片，没有其他特殊样式。

测试案例 2: 不同类型的卡片

主色卡片

这是一个主色的卡片，背景色不同。

副色卡片

这是一个副色的卡片，背景色不同。

成功状态卡片

这是一个成功状态的卡片，带有绿色背景。

警告状态卡片

这是一个警告状态的卡片，带有黄色背景。

危险状态卡片

这是一个危险状态的卡片，带有红色背景。

测试案例 3: 带图标的卡片

带图标的卡片

这是一个带图标的卡片，图标是一个星星。

测试案例 4: 可悬停的卡片

悬停效果卡片

这是一个启用了悬停效果的卡片，当你悬停时，它会有阴影效果。

测试案例 5: 带边框的卡片

带边框的卡片

这是一个带有边框的卡片，默认是带边框的。

测试案例 6: 不带边框的卡片

不带边框的卡片

这是一个不带边框的卡片，边框是可配置的。

测试案例 7: 带底部的卡片

卡片带底部

这是一个有底部按钮的卡片，底部内容由 `footer` 插槽提供。

基本使用

<template>
  <div class="card-demo">
    <!-- 测试案例 1: 基本卡片 -->
    <h3>测试案例 1: 默认卡片</h3>
    <se-card title="默认卡片">
      这是一个默认类型的卡片，没有其他特殊样式。
    </se-card>

    <!-- 测试案例 2: 卡片类型-->
    <h3>测试案例 2: 不同类型的卡片</h3>
    <se-card type="primary" title="主色卡片">
      这是一个主色的卡片，背景色不同。
    </se-card>
    <se-card type="secondary" title="副色卡片">
      这是一个副色的卡片，背景色不同。
    </se-card>
    <se-card type="success" title="成功状态卡片">
      这是一个成功状态的卡片，带有绿色背景。
    </se-card>
    <se-card type="warning" title="警告状态卡片">
      这是一个警告状态的卡片，带有黄色背景。
    </se-card>
    <se-card type="danger" title="危险状态卡片">
      这是一个危险状态的卡片，带有红色背景。
    </se-card>

    <!-- 测试案例 3: 带图标的卡片 -->
    <h3>测试案例 3: 带图标的卡片</h3>
    <se-card type="primary" icon="⭐" title="带图标的卡片">
      这是一个带图标的卡片，图标是一个星星。
    </se-card>

    <!-- 测试案例 4: 可悬停的卡片 -->
    <h3>测试案例 4: 可悬停的卡片</h3>
    <se-card hoverable title="悬停效果卡片">
      这是一个启用了悬停效果的卡片，当你悬停时，它会有阴影效果。
    </se-card>

    <!-- 测试案例 5: 带边框的卡片 -->
    <h3>测试案例 5: 带边框的卡片</h3>
    <se-card bordered title="带边框的卡片">
      这是一个带有边框的卡片，默认是带边框的。
    </se-card>

    <!-- 测试案例 6: 不带边框的卡片 -->
    <h3>测试案例 6: 不带边框的卡片</h3>
    <se-card :bordered="false" title="不带边框的卡片">
      这是一个不带边框的卡片，边框是可配置的。
    </se-card>

    <!-- 测试案例 7: 带有卡片内容和底部 -->
    <h3>测试案例 7: 带底部的卡片</h3>
    <se-card title="卡片带底部">
      <template #footer>
        <button>查看更多</button>
      </template>
      这是一个有底部按钮的卡片，底部内容由 `footer` 插槽提供。
    </se-card>
  </div>
</template>

<style scoped>
.card-demo {
  padding: 20px;
}

h3 {
  margin-top: 30px;
  font-size: 18px;
  color: #333;
}
</style>

---

示例

<se-card type="primary">
    <div>这是一个基础卡片</div>
</se-card>

---

参数说明

参数名	类型	默认值	描述
type	String	无	卡片的样式类型，可选值有 primary、secondary、success、warning、danger
shadow	String	'always'	卡片阴影显示规则，可选值：'always'（始终显示）、'hover'（悬浮时显示）、'never'（不显示）
header	String	无	卡片头部内容
footer	String	无	卡片底部内容

---

插槽说明

插槽名	描述
default	卡片的主要内容区域
header	自定义卡片的头部区域
footer	自定义卡片的底部区域

---

使用说明

1. 基础使用
   直接使用 se-card 标签即可。

   <se-card>
       <p>这是卡片内容</p>
   </se-card>

2. 设置样式类型
   通过 type 属性设置卡片样式。

   <se-card type="primary">
       <p>这是主样式卡片</p>
   </se-card>

3. 使用插槽
   自定义头部和底部内容。

   <se-card>
       <template #header>
           <h3>卡片头部</h3>
       </template>
       <p>卡片内容</p>
       <template #footer>
           <p>卡片底部</p>
       </template>
   </se-card>

4. 设置阴影效果
   使用 shadow 属性控制阴影显示。

   <se-card shadow="hover">
       <p>悬浮时显示阴影的卡片</p>
   </se-card>

---

样式说明

1. 全局样式变量
   可通过修改 Less 变量自定义样式。

   @card-padding: 16px;
   @card-border-color: #e0e0e0;
   @card-shadow-color: rgba(0, 0, 0, 0.1);

2. 自定义主题
   覆盖默认样式类，定义符合需求的卡片主题。

---

Card 组件为内容展示提供了多种样式和功能支持，可结合场景需求灵活应用。