2023-05-27 23:55:27 +08:00
|
|
|
mod tabbar_item;
|
2023-11-01 14:04:12 +08:00
|
|
|
mod theme;
|
2023-05-27 23:55:27 +08:00
|
|
|
|
|
|
|
pub use tabbar_item::*;
|
2023-11-01 14:04:12 +08:00
|
|
|
pub use theme::TabbarTheme;
|
2023-05-27 23:55:27 +08:00
|
|
|
|
2024-03-19 22:02:43 +08:00
|
|
|
use crate::{use_theme, Theme};
|
|
|
|
use leptos::*;
|
|
|
|
use thaw_utils::{mount_style, Model};
|
|
|
|
|
2023-05-27 23:55:27 +08:00
|
|
|
#[component]
|
2024-02-01 15:24:09 +08:00
|
|
|
pub fn Tabbar(#[prop(optional, into)] value: Model<String>, children: Children) -> impl IntoView {
|
2023-10-07 21:41:03 +08:00
|
|
|
mount_style("tabbar", include_str!("./tabbar.css"));
|
2023-11-01 14:04:12 +08:00
|
|
|
let theme = use_theme(Theme::light);
|
|
|
|
let css_vars = create_memo(move |_| {
|
|
|
|
theme.with(|theme| {
|
|
|
|
format!(
|
2023-11-05 16:03:58 +08:00
|
|
|
"--thaw-background-color: {};",
|
2023-11-01 14:04:12 +08:00
|
|
|
theme.tabbar.background_color
|
|
|
|
)
|
|
|
|
})
|
|
|
|
});
|
2023-11-19 14:06:23 +08:00
|
|
|
|
2023-11-02 22:01:48 +08:00
|
|
|
view! {
|
2023-11-19 14:06:23 +08:00
|
|
|
<Provider value=TabbarInjection(value)>
|
|
|
|
<div class="thaw-tabbar" style=move || css_vars.get()>
|
|
|
|
{children()}
|
|
|
|
</div>
|
|
|
|
</Provider>
|
2023-11-02 22:01:48 +08:00
|
|
|
}
|
2023-05-27 23:55:27 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
#[derive(Clone)]
|
2024-01-29 10:57:55 +08:00
|
|
|
pub(crate) struct TabbarInjection(pub Model<String>);
|
2023-05-27 23:55:27 +08:00
|
|
|
|
2023-11-09 16:46:14 +08:00
|
|
|
pub(crate) fn use_tabbar() -> TabbarInjection {
|
|
|
|
expect_context()
|
2023-05-27 23:55:27 +08:00
|
|
|
}
|