卡片 card

数据展示组件。三层同源：无头内核给出解剖与状态机，Vue 组件与自定义元素只是它的两层外壳，行为完全一致。

示例

基础用法

除了 root，封面、头、身、脚都可选；只写用得上的那几段

本月账单

账期 7 月 1 日至 7 月 31 日

共 128 笔支出，合计 3,240.00 元。

<script setup lang="ts">
import { XhCardBody, XhCardDescription, XhCardHeader, XhCardRoot, XhCardTitle } from "@xihan-ui/vue";
</script>

<template>
  <XhCardRoot variant="outline" style="max-inline-size: 360px">
    <XhCardHeader>
      <XhCardTitle>本月账单</XhCardTitle>
      <XhCardDescription>账期 7 月 1 日至 7 月 31 日</XhCardDescription>
    </XhCardHeader>
    <XhCardBody>共 128 笔支出，合计 3,240.00 元。</XhCardBody>
  </XhCardRoot>
</template>

形态

variant 只改描边、底色与投影怎么用，各段的排版三档一致

outline

一段用来看底色与描边的正文。

subtle

一段用来看底色与描边的正文。

elevated

一段用来看底色与描边的正文。

ghost

一段用来看底色与描边的正文。

<script setup lang="ts">
import { XhCardBody, XhCardHeader, XhCardRoot, XhCardTitle } from "@xihan-ui/vue";

const variants = ["outline", "subtle", "elevated", "ghost"] as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <XhCardRoot v-for="v in variants" :key="v" :variant="v" style="inline-size: 200px">
      <XhCardHeader>
        <XhCardTitle>{{ v }}</XhCardTitle>
      </XhCardHeader>
      <XhCardBody>一段用来看底色与描边的正文。</XhCardBody>
    </XhCardRoot>
  </div>
</template>

尺寸

size 换的是各段的内边距与标题字号，不传 size 即默认档

小

正文。

默认

正文。

大

正文。

<script setup lang="ts">
import { XhCardBody, XhCardHeader, XhCardRoot, XhCardTitle } from "@xihan-ui/vue";

// 中间一档不写 size，用 undefined 表达
const sizes = [
  { size: "sm", label: "小" },
  { size: undefined, label: "默认" },
  { size: "lg", label: "大" },
] as const;
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px">
    <XhCardRoot
      v-for="s in sizes"
      :key="s.label"
      :size="s.size"
      variant="outline"
      style="inline-size: 200px"
    >
      <XhCardHeader>
        <XhCardTitle>{{ s.label }}</XhCardTitle>
      </XhCardHeader>
      <XhCardBody>正文。</XhCardBody>
    </XhCardRoot>
  </div>
</template>

分段与悬停

segmented 在段与段之间画一条分隔线；hoverable 只在能用指针的设备上抬起

分段

头、身、脚之间各有一条线。

底部操作位

可悬停

把指针移上来看抬起效果。

<script setup lang="ts">
import { XhCardBody, XhCardFooter, XhCardHeader, XhCardRoot, XhCardTitle } from "@xihan-ui/vue";
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 16px">
    <XhCardRoot variant="outline" segmented style="inline-size: 220px">
      <XhCardHeader>
        <XhCardTitle>分段</XhCardTitle>
      </XhCardHeader>
      <XhCardBody>头、身、脚之间各有一条线。</XhCardBody>
      <XhCardFooter>底部操作位</XhCardFooter>
    </XhCardRoot>

    <XhCardRoot variant="outline" hoverable style="inline-size: 220px">
      <XhCardHeader>
        <XhCardTitle>可悬停</XhCardTitle>
      </XhCardHeader>
      <XhCardBody>把指针移上来看抬起效果。</XhCardBody>
    </XhCardRoot>
  </div>
</template>

带封面

封面顶到根的边上、不吃内边距，圆角由根统一裁

七月总结

封面是任意内容，放图片或自绘都行

正文。

<script setup lang="ts">
import { XhCardBody, XhCardCover, XhCardDescription, XhCardHeader, XhCardRoot, XhCardTitle } from "@xihan-ui/vue";
</script>

<template>
  <XhCardRoot variant="elevated" style="max-inline-size: 300px">
    <XhCardCover>
      <div
        style="
          block-size: 120px;
          background: linear-gradient(135deg, var(--xh-bg-brand), var(--xh-bg-subtle));
        "
      />
    </XhCardCover>
    <XhCardHeader>
      <XhCardTitle>七月总结</XhCardTitle>
      <XhCardDescription>封面是任意内容，放图片或自绘都行</XhCardDescription>
    </XhCardHeader>
    <XhCardBody>正文。</XhCardBody>
  </XhCardRoot>
</template>

产物

层	值
自定义元素	<xh-card>
Vue 组件	XhCardBody XhCardCover XhCardDescription XhCardFooter XhCardHeader XhCardRoot XhCardTitle
状态机	无，connect 直接由 props 算属性
皮肤	@xihan-ui/styles/card.css

解剖

部件名即 data-part 属性值，也是皮肤的选择器。加粗的是必备部件，不渲染它组件不工作（Web Components 适配器会在诊断通道上报 wc.missing-part）。

data-scope="card"：root · cover · header · title · description · body · footer

Props

属性	类型	必填	说明
hoverable	boolean		指针悬停时抬起：只落 data-hoverable，抬多少由皮肤定。
segmented	boolean		分段：在头、身、脚之间画分隔线。
size	Size		尺寸：sm / md / lg，决定各段的内边距与标题字号。
variant	CardVariant		形态：outline / subtle / elevated / ghost，决定描边、底色与投影怎么用。

connect API

connect 产出的对象。getXxxProps() 铺到对应部件的宿主元素上，其余是可读状态与操作入口。

成员	类型	说明
getRootProps	() => T['element']
getCoverProps	() => T['element']
getHeaderProps	() => T['element']
getTitleProps	() => T['element']
getDescriptionProps	() => T['element']
getBodyProps	() => T['element']
getFooterProps	() => T['element']

键盘

规格出处：W3C APG

无键盘交互（不接收焦点，或焦点行为完全由原生元素提供）。