mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-24 06:49:21 -05:00
45 lines
1.3 KiB
Markdown
45 lines
1.3 KiB
Markdown
|
# Badge
|
||
|
|
|
||
|
|
```rust demo
|
||
|
|
let value = create_rw_signal(0);
|
||
|
|
|
||
|
|
view! {
|
||
|
|
<Space>
|
||
|
|
<Badge value max=10>
|
||
|
|
<Avatar/>
|
||
|
|
</Badge>
|
||
|
|
<Badge variant=BadgeVariant::Success value max=10>
|
||
|
|
<Avatar/>
|
||
|
|
</Badge>
|
||
|
|
<Badge variant=BadgeVariant::Warning value max=10>
|
||
|
|
<Avatar/>
|
||
|
|
</Badge>
|
||
|
|
<Badge variant=BadgeVariant::Warning dot=true>
|
||
|
|
<Avatar/>
|
||
|
|
</Badge>
|
||
|
|
<Button on_click=move |_| value.update(|v| *v += 1)>"+1"</Button>
|
||
|
|
<Button on_click=move |_| {
|
||
|
|
value
|
||
|
|
.update(|v| {
|
||
|
|
if *v != 0 {
|
||
|
|
*v -= 1;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}>"-1"</Button>
|
||
|
|
"value:"
|
||
|
|
{move || value.get()}
|
||
|
|
</Space>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### Badge Props
|
||
|
|
|
||
|
|
| Name | Type | Default | Description |
|
||
|
|
| --- | --- | --- | --- |
|
||
|
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the badge element. |
|
||
|
|
| value | `MaybeSignal<u32>` | `0` | Badge's value. |
|
||
|
|
| max | `MaybeSignal<u32>` | `u32::MAX` | The maximum number of the badge when its value overflows. |
|
||
|
|
| variant | `MaybeSignal<BadgeVariant>` | `BadgeVariant::Error` | Badge variant. |
|
||
|
|
| dot | `MaybeSignal<bool>` | `false` | Show badge as dot. |
|
||
|
|
| children | `Children` | | Badge's content. |
|