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()} +
} }