数据展示Display · 21 / 64

Card

ui.widgets.Card

把标题、正文和可交互表面组织成一个视觉单元。Groups a title, body and interactive surface into one unit.

BEHAVIOR CONTRACT

default / outlined / elevated、selected、hoverable、interactive 与 padding 策略显式区分。default / outlined / elevated, selected, hoverable, interactive and padding are explicit.

RECORDED INTERACTION

录像展示 variants 和各类交互状态。Shows the variants and interactive states.

examples/storybook/stories.zig:497

// ── Card ──
pub fn buildCard(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);

    // ── 变体 ──
    try c.appendChild(a, try label(cx, "Variants (default / outlined / elevated)"));
    try c.appendChild(a, try W.Card(.{ .title = "Default", .subtitle = "with subtitle", .variant = .default, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Outlined", .variant = .outlined, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Elevated", .variant = .elevated, .width = 320 }).mount(scope, cx));

    // ── body ──
    try c.appendChild(a, try label(cx, "With body"));
    const res = try W.Card(.{ .title = "Card with body", .width = 320 }).mountBody(scope, cx);
    try res.body.appendChild(a, try ui.text(cx, "Body content goes here.", .{ .font_size = 13, .color = light.color.fg_secondary }));
    try c.appendChild(a, res.card);

    // ── 交互态 ──
    try c.appendChild(a, try label(cx, "States (selected / hoverable / interactive / no-pad)"));
    try c.appendChild(a, try W.Card(.{ .title = "Selected", .selected = true, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Hoverable", .hoverable = true, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Interactive", .interactive = true, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "No padding", .padded = false, .width = 320 }).mount(scope, cx));
    return c;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:497

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

ChipChip

AlertAlert