mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-24 06:49:21 -05:00
66 lines
2 KiB
Markdown
66 lines
2 KiB
Markdown
# Tabs
|
|
|
|
```rust demo
|
|
let value = create_rw_signal(String::from("apple"));
|
|
|
|
view! {
|
|
<Tabs value>
|
|
<Tab key="apple" label="Apple">
|
|
"apple"
|
|
</Tab>
|
|
<Tab key="pear" label="Pear">
|
|
"pear"
|
|
</Tab>
|
|
</Tabs>
|
|
}
|
|
```
|
|
|
|
### Custom tab label
|
|
|
|
```rust demo
|
|
use leptos_meta::Style;
|
|
let value = create_rw_signal(String::from("apple"));
|
|
|
|
view! {
|
|
<Style id="demo-tab-label">
|
|
".p-0 { padding: 0 }"
|
|
</Style>
|
|
<Tabs value>
|
|
<Tab key="apple">
|
|
<TabLabel slot class="p-0">
|
|
"🍎 Apple"
|
|
</TabLabel>
|
|
"apple"
|
|
</Tab>
|
|
<Tab key="pear">
|
|
<TabLabel slot>
|
|
"🍐 Pear"
|
|
</TabLabel>
|
|
"pear"
|
|
</Tab>
|
|
</Tabs>
|
|
}
|
|
```
|
|
|
|
### Tabs Props
|
|
|
|
| Name | Type | Default | Description |
|
|
| -------- | --------------------- | --------------------- | --------------------------------------- |
|
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the tabs element. |
|
|
| value | `RwSignal<String>` | `TagVariant::Default` | Tabs value. |
|
|
| children | `Children` | | Tabs content. |
|
|
|
|
### Tab Props
|
|
|
|
| Name | Type | Default | Description |
|
|
| -------- | --------------------- | -------------------- | -------------------------------------- |
|
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the tab element. |
|
|
| key | `String` | | The indentifier of the tab. |
|
|
| label | `String` | `Default::default()` | The label of the tab. |
|
|
| children | `Children` | | Tabs content. |
|
|
|
|
### Tab Slots
|
|
|
|
| Name | Default | Description |
|
|
| -------- | ------- | -------------- |
|
|
| TabLabel | `None` | label content. |
|