guise/data/
tabs.rs

1//! `Tabs` — a tab bar with switchable panels (gpui entity).
2
3use gpui::prelude::*;
4use gpui::{div, px, transparent_black, App, Context, IntoElement, SharedString, Window};
5
6use super::Content;
7use crate::devtools::Probed;
8use crate::theme::{theme, Size};
9
10struct TabItem {
11    label: SharedString,
12    content: Content,
13}
14
15/// A tabbed view. Create with `cx.new(|cx| Tabs::new(cx).tab("One", |_, _| ...))`.
16pub struct Tabs {
17    tabs: Vec<TabItem>,
18    active: usize,
19}
20
21impl Tabs {
22    pub fn new(_cx: &mut Context<Self>) -> Self {
23        Tabs {
24            tabs: Vec::new(),
25            active: 0,
26        }
27    }
28
29    /// Add a tab. `content` is rebuilt each render so it can show live data.
30    pub fn tab<E>(
31        mut self,
32        label: impl Into<SharedString>,
33        content: impl Fn(&mut Window, &mut App) -> E + 'static,
34    ) -> Self
35    where
36        E: IntoElement,
37    {
38        self.tabs.push(TabItem {
39            label: label.into(),
40            content: Box::new(move |window, cx| content(window, cx).into_any_element()),
41        });
42        self
43    }
44
45    pub fn active(mut self, index: usize) -> Self {
46        self.active = index;
47        self
48    }
49
50    /// The index of the active tab.
51    pub fn active_index(&self) -> usize {
52        self.active
53    }
54}
55
56impl Render for Tabs {
57    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
58        let t = theme(cx);
59        let accent = t.primary().hsla();
60        let dimmed = t.dimmed().hsla();
61        let text = t.text().hsla();
62        let line = t.border().hsla();
63        let font = t.font_size(Size::Sm);
64
65        let count = self.tabs.len();
66        let active = if count == 0 {
67            0
68        } else {
69            self.active.min(count - 1)
70        };
71
72        let mut bar = div().flex().border_b_1().border_color(line);
73        for (i, tab) in self.tabs.iter().enumerate() {
74            let is_active = i == active;
75            bar = bar.child(
76                div()
77                    .id(("guise-tab", i))
78                    .px(px(16.0))
79                    .py(px(8.0))
80                    .border_b_2()
81                    .border_color(if is_active {
82                        accent
83                    } else {
84                        transparent_black()
85                    })
86                    .text_size(px(font))
87                    .text_color(if is_active { accent } else { dimmed })
88                    .hover(move |s| s.text_color(text))
89                    .child(tab.label.clone())
90                    .on_click(cx.listener(move |this, _ev, _window, cx| {
91                        this.active = i;
92                        cx.notify();
93                    })),
94            );
95        }
96
97        let mut root = div().flex().flex_col().gap(px(12.0)).child(bar);
98        if count > 0 {
99            let panel = (self.tabs[active].content)(window, cx);
100            root = root.child(panel);
101        }
102        root.probe("Tabs")
103    }
104}
guise/data/tabs.rs

guise/data/
tabs.rs
