diff --git a/demo_markdown/docs/tabs/mod.md b/demo_markdown/docs/tabs/mod.md
index c5224c6..6a0d902 100644
--- a/demo_markdown/docs/tabs/mod.md
+++ b/demo_markdown/docs/tabs/mod.md
@@ -15,6 +15,33 @@ view! {
}
```
+### Custom tab label
+
+```rust demo
+use leptos_meta::Style;
+let value = create_rw_signal(String::from("apple"));
+
+view! {
+
+
+
+
+ "🍎 Apple"
+
+ "apple"
+
+
+
+ "🍐 Pear"
+
+ "pear"
+
+
+}
+```
+
### Tabs Props
| Name | Type | Default | Description |
@@ -29,5 +56,11 @@ view! {
| -------- | --------------------- | -------------------- | -------------------------------------- |
| class | `MaybeSignal` | `Default::default()` | Addtional classes for the tab element. |
| key | `String` | | The indentifier of the tab. |
-| label | `String` | | The label 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. |
diff --git a/thaw/src/tabs/mod.rs b/thaw/src/tabs/mod.rs
index 951797e..1fce522 100644
--- a/thaw/src/tabs/mod.rs
+++ b/thaw/src/tabs/mod.rs
@@ -62,13 +62,13 @@ fn TabsInner(
view! {
-
+
();
- let TabOption { key, label } = option;
+ let TabOption { key, label, label_view } = option;
create_effect({
let key = key.clone();
move |_| {
@@ -93,26 +93,55 @@ fn TabsInner(
}
}
});
- view! {
-
- ref=label_ref
- >
- {label}
-
+ {children}
+
+ }
+ } else {
+ view! {
+
+
+ {if label.is_empty() { key } else { label }}
+
+ }
}
}
/>
diff --git a/thaw/src/tabs/tab.rs b/thaw/src/tabs/tab.rs
index eaa2c49..138dfbf 100644
--- a/thaw/src/tabs/tab.rs
+++ b/thaw/src/tabs/tab.rs
@@ -6,12 +6,37 @@ use leptos::*;
pub(crate) struct TabOption {
pub key: String,
pub label: String,
+ pub label_view: Option,
+}
+
+#[derive(Clone)]
+pub(crate) struct TabLabelView {
+ pub class: MaybeSignal,
+ pub children: Fragment,
+}
+
+impl From for TabLabelView {
+ fn from(tab_label: TabLabel) -> Self {
+ let TabLabel { class, children } = tab_label;
+ Self {
+ class,
+ children: children(),
+ }
+ }
+}
+
+#[slot]
+pub struct TabLabel {
+ #[prop(optional, into)]
+ class: MaybeSignal,
+ children: Children,
}
#[component]
pub fn Tab(
#[prop(into)] key: String,
- #[prop(into)] label: String,
+ #[prop(optional, into)] label: String,
+ #[prop(optional)] tab_label: Option,
#[prop(optional, into)] class: MaybeSignal,
children: Children,
) -> impl IntoView {
@@ -20,19 +45,29 @@ pub fn Tab(
tabs.push_tab_options(TabOption {
key: key.clone(),
label,
+ label_view: tab_label.map(|label| label.into()),
});
- on_cleanup({
+ let is_active = create_memo({
let key = key.clone();
let tabs = tabs.clone();
- move || {
- tabs.remove_tab_options(&key);
- }
+ move |_| key == tabs.get_key()
+ });
+
+ on_cleanup(move || {
+ tabs.remove_tab_options(&key);
});
view! {
- {children()}
+
+ {children()}
+
}
}