2024-01-03 20:52:56 +08:00
|
|
|
# Card
|
|
|
|
|
|
|
|
```rust demo
|
|
|
|
view! {
|
2024-05-14 14:56:48 +08:00
|
|
|
<Card>
|
|
|
|
<CardHeader>
|
2024-05-16 16:18:36 +08:00
|
|
|
<Body1>
|
2024-06-03 16:31:32 +08:00
|
|
|
<b>"Header"</b>" 2022-02-22"
|
2024-05-16 16:18:36 +08:00
|
|
|
</Body1>
|
2024-05-14 14:56:48 +08:00
|
|
|
<CardHeaderDescription slot>
|
2024-05-14 17:39:13 +08:00
|
|
|
<Caption1>"Description"</Caption1>
|
2024-05-14 14:56:48 +08:00
|
|
|
</CardHeaderDescription>
|
|
|
|
<CardHeaderAction slot>
|
|
|
|
<Button appearance=ButtonAppearance::Transparent>
|
|
|
|
"..."
|
|
|
|
</Button>
|
|
|
|
</CardHeaderAction>
|
|
|
|
</CardHeader>
|
|
|
|
<CardPreview>
|
|
|
|
<img src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" style="width: 100%"/>
|
|
|
|
</CardPreview>
|
|
|
|
<CardFooter>
|
|
|
|
<Button>"Reply"</Button>
|
|
|
|
<Button>"Share"</Button>
|
|
|
|
</CardFooter>
|
|
|
|
</Card>
|
2024-01-03 20:52:56 +08:00
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
### Card Props
|
|
|
|
|
2024-02-09 22:44:22 +08:00
|
|
|
| Name | Type | Default | Description |
|
|
|
|
| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
|
|
|
|
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the card element. |
|
|
|
|
| title | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Card title. |
|
|
|
|
| children | `Children` | | Card's content. |
|
2024-01-03 20:52:56 +08:00
|
|
|
|
|
|
|
### Card Slots
|
|
|
|
|
|
|
|
| Name | Default | Description |
|
|
|
|
| --------------- | ------- | --------------------- |
|
|
|
|
| CardHeader | `None` | Header content. |
|
|
|
|
| CardHeaderExtra | `None` | Header extra content. |
|
|
|
|
| CardFooter | `None` | Footer content. |
|