- ) {
self.children.extend(elements)
}
}
impl RenderOnce for Tab {
#[allow(refining_impl_trait)]
fn render(self, _: &mut Window, cx: &mut App) -> Stateful
{
let (text_color, tab_bg, _tab_hover_bg, _tab_active_bg) = match self.selected {
false => (
cx.theme().colors().text_muted,
cx.theme().colors().tab_inactive_background,
cx.theme().colors().ghost_element_hover,
cx.theme().colors().ghost_element_active,
),
true => (
cx.theme().colors().text,
cx.theme().colors().tab_active_background,
cx.theme().colors().element_hover,
cx.theme().colors().element_active,
),
};
let (start_slot, end_slot) = {
let start_slot = h_flex().size_3().justify_center().children(self.start_slot);
let end_slot = h_flex().size_3().justify_center().children(self.end_slot);
match self.close_side {
TabCloseSide::End => (start_slot, end_slot),
TabCloseSide::Start => (end_slot, start_slot),
}
};
self.div
.h(Tab::container_height(cx))
.bg(tab_bg)
.border_color(cx.theme().colors().border)
.map(|this| match self.position {
TabPosition::First => {
if self.selected {
this.pl_px().border_r_1().pb_px()
} else {
this.pl_px().pr_px().border_b_1()
}
}
TabPosition::Last => {
if self.selected {
this.border_l_1().border_r_1().pb_px()
} else {
this.pr_px().pl_px().border_b_1().border_r_1()
}
}
TabPosition::Middle(Ordering::Equal) => this.border_l_1().border_r_1().pb_px(),
TabPosition::Middle(Ordering::Less) => this.border_l_1().pr_px().border_b_1(),
TabPosition::Middle(Ordering::Greater) => this.border_r_1().pl_px().border_b_1(),
})
.cursor_pointer()
.child(
h_flex()
.group("")
.relative()
.h(Tab::content_height(cx))
.px(DynamicSpacing::Base04.px(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.text_color(text_color)
.child(start_slot)
.children(self.children)
.child(end_slot),
)
}
}
// View this component preview using `workspace: open component-preview`
impl ComponentPreview for Tab {
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
v_flex()
.gap_6()
.children(vec![example_group_with_title(
"Variations",
vec![
single_example(
"Default",
Tab::new("default").child("Default Tab").into_any_element(),
),
single_example(
"Selected",
Tab::new("selected")
.toggle_state(true)
.child("Selected Tab")
.into_any_element(),
),
single_example(
"First",
Tab::new("first")
.position(TabPosition::First)
.child("First Tab")
.into_any_element(),
),
single_example(
"Middle",
Tab::new("middle")
.position(TabPosition::Middle(Ordering::Equal))
.child("Middle Tab")
.into_any_element(),
),
single_example(
"Last",
Tab::new("last")
.position(TabPosition::Last)
.child("Last Tab")
.into_any_element(),
),
],
)])
.into_any_element()
}
}