wehub-resource-sync
52 lines
1.8 KiB
Plaintext
52 lines
1.8 KiB
Plaintext
import { ComponentPreview } from "@/components/component-preview";
|
|
import { AttrTable } from "@/components/attr-table";
|
|
|
|
# Card
|
|
|
|
`card` is the bordered, elevated surface container. It is a stacking container — children layer on top of each other and `gap` is rejected — so put a single `column` (or `row`) inside for flow. Cards carry 24px of content padding by default (the house inset; 16 at `size="sm"`) — set `padding` explicitly to override it. Binding `on-press` makes the whole surface pressable, the list-of-cards pattern. For the plain surface with the same stacking contract, see [panel](/components/panel).
|
|
|
|
<ComponentPreview name="card" alt="A card rendered by the engine" />
|
|
|
|
## Markup
|
|
|
|
```html
|
|
<card width="340">
|
|
<column gap="12">
|
|
<text>Deploy your app</text>
|
|
<text wrap="true" foreground="text_muted">The runtime packages your views, commands, and assets into one native binary.</text>
|
|
<row gap="8">
|
|
<button variant="primary" on-press="deploy">Deploy</button>
|
|
<button variant="ghost" on-press="cancel">Cancel</button>
|
|
</row>
|
|
</column>
|
|
</card>
|
|
```
|
|
|
|
## Programmatic construction (Zig)
|
|
|
|
In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically:
|
|
|
|
```zig
|
|
ui.el(.card, .{ .width = 340 }, .{
|
|
ui.column(.{ .gap = 12 }, .{
|
|
ui.text(.{}, "Deploy your app"),
|
|
ui.text(.{ .wrap = true, .style_tokens = .{ .foreground = .text_muted } }, "The runtime packages your views, commands, and assets into one native binary."),
|
|
ui.row(.{ .gap = 8 }, .{
|
|
ui.button(.{ .variant = .primary, .on_press = .deploy }, "Deploy"),
|
|
ui.button(.{ .variant = .ghost, .on_press = .cancel }, "Cancel"),
|
|
}),
|
|
}),
|
|
})
|
|
```
|
|
|
|
## Attributes
|
|
|
|
<AttrTable
|
|
attrs={[
|
|
"text",
|
|
"padding",
|
|
"width",
|
|
"on-press",
|
|
]}
|
|
/>
|