FxCard 卡片容器

将信息整合在卡片容器中。

基础用法

卡片包含 header、body 和 footer 三部分，header 和 footer 是可选的，内容通过默认插槽传入。

<FxCard header="基础用法">
  <p>这是卡片内容区域</p>
</FxCard>

简洁卡片

可以省略 header，仅使用简洁的卡片容器。

<FxCard>
  <p>无 header 的简洁卡片，仅展示内容区域。</p>
</FxCard>

带额外操作（extra 插槽）

通过 extra 插槽在标题右侧添加操作按钮。该插槽仅在 header prop 模式下生效。

<template>
  <FxCard header="带额外操作">
    <template #extra>
      <FxBtn type="primary" size="small">操作</FxBtn>
    </template>
    <p>通过 extra 插槽可以在标题右侧添加操作按钮（仅在 header prop 模式下生效）</p>
  </FxCard>
</template>

自定义头部（header 插槽）

通过 header 插槽完全自定义头部内容，会替代 header prop 的默认渲染。

<template>
  <FxCard>
    <template #header>
      <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-2">
          <FxIcon name="ep:info-filled" :size="16" />
          <span class="text-base font-bold tracking-[-0.02em]">自定义头部</span>
        </div>
        <FxBtn size="small">操作</FxBtn>
      </div>
    </template>
    <p>通过 header 插槽完全自定义头部内容（会替代 header prop），可自由组合图标、文字、操作按钮等。</p>
  </FxCard>
</template>

阴影效果

通过 shadow 属性控制卡片阴影的显示时机：always（始终显示）、hover（悬停显示）或 never（不显示）。

<div class="space-y-4">
  <FxCard header="始终显示阴影（默认）">
    <p>shadow="always" — 始终显示阴影</p>
  </FxCard>
  <FxCard header="悬停显示阴影" shadow="hover">
    <p>shadow="hover" — 鼠标悬停时显示阴影</p>
  </FxCard>
  <FxCard header="不显示阴影" shadow="never">
    <p>shadow="never" — 不显示阴影</p>
  </FxCard>
</div>

自定义 body 样式

通过 bodyStyle 自定义 body 区域的 CSS 样式，支持 string、object 和 array 格式。

<FxCard
  header="自定义 body 样式"
  :body-style="{ padding: '16px', background: 'var(--color-background)' }"
>
  <p>bodyStyle 支持 string / object / array 三种格式。</p>
</FxCard>

带底部（footer）

通过 footer prop 或 footer 插槽设置卡片底部内容。

<FxCard header="确认操作" footer="底部提示信息">
  <p>正文内容</p>
</FxCard>

<FxCard header="带操作按钮的底部">
  <p>正文内容</p>
  <template #footer>
    <div class="flex items-center gap-3">
      <FxBtn type="primary" size="small">确认</FxBtn>
      <FxBtn size="small">取消</FxBtn>
    </div>
  </template>
</FxCard>

填充模式（fill）

fill=true 时卡片通过 h-full 撑满父容器高度，body 区域自动占据剩余空间并可滚动。

父容器需要有明确的高度（如 h-full），fill 模式才能生效。

<div class="h-60">
  <FxCard fill header="填充模式">
    <p>卡片撑满父容器高度（300px），内容超出时 body 区域可滚动。</p>
  </FxCard>
</div>

API

Attributes

属性	说明	类型	默认值
header	卡片标题，也接受 slot#header 传入自定义内容	string	—
footer	卡片底部文字，也接受 slot#footer 传入自定义内容	string	—
body-style	body 区域 CSS 样式	StyleValue	—
header-class	header 区域自定义 class	string	—
body-class	body 区域自定义 class	string	—
footer-class	footer 区域自定义 class	string	—
shadow	阴影显示时机	'always' | 'hover' | 'never'	'always'
fill	填充模式：卡片高度撑满父容器	boolean	false

fill 是 FxCard 的增强属性，需配合父容器有明确高度使用。

Slots

插槽名	说明
default	卡片主体内容（body 区域）
header	自定义头部内容，会替代 header prop
footer	自定义底部内容，会替代 footer prop
extra	header 右侧额外操作区域（仅 header prop 模式下生效）

extra 插槽仅在 header prop（非 slot#header）模式下有效。使用 #header 插槽时，用户自行控制头部所有内容。