42 lines
1.5 KiB
Rust
42 lines
1.5 KiB
Rust
use yew::{function_component, html, use_state_eq, Callback, Html, Properties};
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct TabPanelProps {
|
|
pub tabs: Vec<(char, Html)>,
|
|
}
|
|
|
|
#[function_component(TabPanel)]
|
|
pub fn tab_panel_props(props: &TabPanelProps) -> Html {
|
|
let active_tab = use_state_eq(|| props.tabs.first().map(|(k, _)| *k).unwrap_or('0'));
|
|
html! {
|
|
<div class="d-flex flex-column h-100">
|
|
<ul class="nav nav-tabs">
|
|
{props.tabs.iter().map(|(c, _)| {
|
|
if !props.tabs.is_empty() && !props.tabs.iter().any(|t| t.0 == *active_tab) {
|
|
active_tab.set(props.tabs.first().map(|v| v.0).unwrap_or('0'));
|
|
}
|
|
let class_name = if *c == *active_tab { "nav-link active" } else { "nav-link" };
|
|
let c_click: char = *c;
|
|
let active_tab_click = active_tab.clone();
|
|
let on_click = Callback::from(move |_| {
|
|
active_tab_click.set(c_click);
|
|
});
|
|
html! {
|
|
<li class="nav-item" key={format!("nav-{}", c)}>
|
|
<a class={class_name} onclick={on_click} href="#">{c}</a>
|
|
</li>
|
|
}}).collect::<Vec<_>>()
|
|
}
|
|
</ul>
|
|
{props.tabs.iter().map(|(c, v)| {
|
|
let class_name = if *c == *active_tab { "termtreewrapper"} else { "d-none"};
|
|
html! {
|
|
<div class={class_name} key={format!("content-{}", c)}>
|
|
{v.clone()}
|
|
</div>
|
|
}
|
|
}).collect::<Vec<_>>()}
|
|
</div>
|
|
}
|
|
}
|