Card 卡片

Card 组件用于展示内容，支持多种类型、尺寸和自定义功能。

基础用法

Create Project

Deploy your new project in one-click.

Project Name

Framework

Select

Vue

React

Angular

<script setup lang="ts">
import { ref } from 'vue';
const formData = ref({
  name: '',
  framework: '',
});
</script>
<template>
  <Card style="padding: 10px; width: 360px">
    <div style="margin-bottom: 20px">
      <h1 style="color: var(--color-text-1); font-size: var(--font-size-3)">
        Create Project
      </h1>
      <span
        style="color: var(--color-text-muted); font-size: var(--font-size-1)"
        >Deploy your new project in one-click.</span
      >
    </div>
    <Form
      labelPosition="top-left"
      size="large"
      labelAlignItems="buttom"
      labelTextAlign="buttom"
    >
      <FormItem label="Project Name">
        <Input
          placeholder="Name of project"
          v-model="formData.name"
          size="large"
          style="font-size: var(--font-size-1)"
        />
      </FormItem>
      <FormItem label="Framework">
        <Select
          placeholder="Select"
          v-model="formData.framework"
          size="large"
          style="font-size: var(--font-size-1)"
        >
          <Option value="vue">Vue</Option>
          <Option value="react">React</Option>
          <Option value="angular">Angular</Option>
        </Select>
      </FormItem>
      <Space>
        <Button
          outline
          size="large"
          style="width: 100%; font-size: var(--font-size-1)"
          >Cancel</Button
        >
        <Button
          default
          size="large"
          style="width: 100%; font-size: var(--font-size-1)"
          >Deploy</Button
        >
      </Space>
    </Form>
  </Card>
</template>

控制卡片尺寸

通过width和height属性可以手动控制卡片的宽度和高度。支持数字(px)和字符串形式的 CSS 值。

自定义宽度卡片

宽度为300px的卡片

自定义高度卡片

高度为200px的卡片

自定义宽高卡片

宽度为100%，高度为150px的卡片

<template>
  <div class="card-group">
    <Card title="自定义宽度卡片" :width="300" headerBorder>
      <div>宽度为300px的卡片</div>
    </Card>
    <Card title="自定义高度卡片" :height="200">
      <div>高度为200px的卡片</div>
    </Card>
    <Card title="自定义宽高卡片" width="100%" height="150px" headerBorder>
      <div>宽度为100%，高度为150px的卡片</div>
    </Card>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

类型和尺寸

卡片支持多种尺寸和类型：

默认卡片

主要卡片

成功卡片

警告卡片

危险卡片

小型卡片

默认卡片

大型卡片

<template>
  <div class="card-group">
    <Card title="默认卡片"></Card>
    <Card title="主要卡片" type="primary"></Card>
    <Card title="成功卡片" type="success"></Card>
    <Card title="警告卡片" type="warning"></Card>
    <Card title="危险卡片" type="danger"></Card>
  </div>
  
  <div class="card-group">
    <Card title="小型卡片" size="small"></Card>
    <Card title="默认卡片"></Card>
    <Card title="大型卡片" size="large"></Card>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
</style>

控制内边距

通过padding属性可以控制卡片内部的内边距。

默认内边距

这是默认内边距的卡片

小内边距

这是内边距为8px的卡片

大内边距

这是内边距为24px的卡片

<template>
  <div class="card-group">
    <Card title="默认内边距" type="info">
      <div>这是默认内边距的卡片</div>
    </Card>
    <Card title="小内边距" padding="8px" type="info">
      <div>这是内边距为8px的卡片</div>
    </Card>
    <Card title="大内边距" :padding="24" type="info">
      <div>这是内边距为24px的卡片</div>
    </Card>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

可折叠卡片与事件

支持设置卡片为可折叠状态，并通过@toggle事件获取展开状态：

可折叠卡片

这是可折叠卡片的内容

展开状态: true

<template>
  <Card title="可折叠卡片" collapsible default-open @toggle="handleToggle">
    <div>这是可折叠卡片的内容</div>
  </Card>
  <p style="margin-top: 16px;">展开状态: {{ expanded }}</p>
</template>

<script setup>
import { ref } from "vue";

const expanded = ref(true);
const handleToggle = (isExpanded) => {
  expanded.value = isExpanded;
  console.log("卡片展开状态:", isExpanded);
};
</script>

自定义插槽

卡片支持多种插槽，包括头部、内容、底部以及新增的右上角、左下角和右下角插槽：

自定义插槽卡片

这是卡片内容

左下角内容

这是底部内容

<template>
  <Card title="自定义插槽卡片">
    <template #topRight>
      <Button size="small">更多</Button>
    </template>
    <div>这是卡片内容</div>
    <template #footer>
      <div>这是底部内容</div>
    </template>
    <template #bottomLeft>
      <span>左下角内容</span>
    </template>
    <template #bottomRight>
      <Button size="small">操作</Button>
    </template>
  </Card>
</template>

<script setup>
</script>

悬浮效果与阴影控制

设置hoverable属性为true可以启用卡片悬浮效果。通过shadow属性可以控制卡片是否显示阴影。

默认阴影卡片

这是一张带有默认阴影的卡片

无阴影卡片

这是一张没有阴影的卡片

悬浮卡片

鼠标悬浮时会有阴影效果

<template>
  <div class="card-group">
    <Card title="默认阴影卡片" shadow>
      <div>这是一张带有默认阴影的卡片</div>
    </Card>
    <Card title="无阴影卡片" :shadow="false">
      <div>这是一张没有阴影的卡片</div>
    </Card>
    <Card title="悬浮卡片" hoverable>
      <div>鼠标悬浮时会有阴影效果</div>
    </Card>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

无边框模式

设置border属性为false可以禁用卡片边框：

无边框卡片

这是无边框卡片的内容

<template>
  <Card title="无边框卡片" :border="false">
    <div>这是无边框卡片的内容</div>
  </Card>
</template>

<script setup>
</script>

灵活布局

通过layout属性可以设置卡片的布局方式：

默认布局

灵活布局

紧凑布局

<template>
  <div class="card-group">
    <Card title="默认布局" layout="default"></Card>
    <Card title="灵活布局" layout="flexible"></Card>
    <Card title="紧凑布局" layout="tight"></Card>
  </div>
</template>

<script setup>
</script>

<style scoped>
.card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

骨架屏控制

通过skeleton属性可以控制卡片是否显示骨架屏效果。通常与异步数据加载配合使用：

<template>
  <Card :skeleton="loading" padding="0px">
    <div v-if="!loading">
      这是异步加载的数据内容。
    </div>
  </Card>
  <Button @click="toggleLoading" text style="margin-top: 16px;">
    {{ loading ? '显示内容' : '显示骨架屏' }}
  </Button>
</template>

<script setup>
import { ref } from "vue";

const loading = ref(true);
const toggleLoading = () => {
  loading.value = !loading.value;
};
</script>

Props

属性名	类型	默认值	说明
title	string	-	卡片标题
type	string	'default'	卡片类型，可选值：'default', 'primary', 'success', 'warning', 'danger'
size	string	'default'	卡片尺寸，可选值：'small', 'default', 'large'
collapsible	boolean	false	是否可折叠
defaultOpen	boolean	false	默认是否展开
hoverable	boolean	false	是否启用悬浮效果
border	boolean	true	是否显示边框
layout	string	'default'	布局方式，可选值：'default', 'flexible', 'tight'
skeleton	boolean	false	是否显示骨架屏
width	string | number	undefined	卡片宽度，支持数字(px)和字符串形式的 CSS 值
height	string | number	undefined	卡片高度，支持数字(px)和字符串形式的 CSS 值
padding	string | number	undefined	卡片内边距，支持数字(px)和字符串形式的 CSS 值
shadow	boolean	false	是否显示阴影

插槽

插槽名	说明
default	卡片内容
title	卡片标题
topRight	右上角内容
footer	底部内容
bottomLeft	左下角内容
bottomRight	右下角内容