卡片 Card

shadow="never" 对应 Arco 默认卡片，shadow="hover" 对应 hoverable。 属性用法见 Element Plus 文档。

标题与内容

使用 shadow="never" 展示 Arco 默认无阴影卡片。

Project overview

A shared component library for the team.

Updated today

<template>
  <el-card header="Project overview" shadow="never" style="width: 280px; max-width: 100%">
    A shared component library for the team.
    <template #footer>Updated today</template>
  </el-card>
</template>

阴影配置

Arco 没有三档 shadow 配置，这里保留各取值区别，悬停卡片可查看 hover 阴影。

always

Card content

hover

Card content

never

Card content

<script setup lang="ts">
const shadows = ['always', 'hover', 'never'] as const
</script>

<template>
  <el-card v-for="shadow in shadows" :key="shadow" :shadow="shadow" :header="shadow" style="width: 200px; max-width: 100%">Card content</el-card>
</template>

与 Arco 的差异

• Element Plus 默认 shadow="always"，与 Arco 默认无阴影不同；可用 ConfigProvider 的 card.shadow = 'never' 统一默认值。
• footer 没有 Arco 对应项，按标题栏的间距延伸。