Card

卡片把相关内容聚合在一个带边框与阴影的容器里，由六个可组合的槽位构成。下方预览由 pingo 引擎实时渲染，并跟随站点主题切换明暗。

用法

import { createElement } from "@dopejs/pingo";
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@dopejs/pingo-ui";

root.render(
  createElement(Card, {
    children: [
      createElement(CardHeader, {
        children: [
          createElement(CardTitle, { children: "账户设置" }),
          createElement(CardDescription, { children: "管理你的账户偏好与通知。" }),
        ],
      }),
      createElement(CardContent, {
        children: createElement("text", { value: "卡片正文内容。" }),
      }),
      createElement(CardFooter, {
        children: createElement(Button, { children: "保存", onPress: () => {} }),
      }),
    ],
  }),
);

所有槽位都是可选的，只组合需要的部分即可；槽位内容原样透传，不做任何包装。

Props

Card、CardHeader、CardContent、CardFooter 接受容器型 props：

CardTitle、CardDescription 接受文本型 props：

无障碍

Card 是纯视觉容器，不引入额外语义；卡片的可读名称与结构由内部放置的标题、按钮等组件承担。标题与正文颜色继承卡片的前景色，明暗主题下均保持对比度。