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
|
|
|
|
2023-11-13 16:17:45 +08:00
|
|
|
use crate::{use_theme, utils::mount_style, Theme};
|
2023-05-27 23:55:27 +08:00
|
|
|
use leptos::*;
|
|
|
|
pub use tabbar_item::*;
|
2023-11-01 14:04:12 +08:00
|
|
|
pub use theme::TabbarTheme;
|
2023-05-27 23:55:27 +08:00
|
|
|
|
|
|
|
#[component]
|
2023-10-11 21:25:11 +08:00
|
|
|
pub fn Tabbar(
|
2023-11-09 14:43:30 +08:00
|
|
|
#[prop(optional, into)] value: RwSignal<String>,
|
2023-10-11 21:25:11 +08:00
|
|
|
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-09 16:46:14 +08:00
|
|
|
provide_context(TabbarInjection(value));
|
2023-11-02 22:01:48 +08:00
|
|
|
view! {
|
2023-11-05 16:03:58 +08:00
|
|
|
<div class="thaw-tabbar" style=move || css_vars.get()>
|
2023-11-02 22:01:48 +08:00
|
|
|
{children()}
|
|
|
|
</div>
|
|
|
|
}
|
2023-05-27 23:55:27 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
#[derive(Clone)]
|
2023-11-09 16:46:14 +08:00
|
|
|
pub(crate) struct TabbarInjection(pub RwSignal<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
|
|
|
}
|