windjammer-ui 0.3.6

Cross-platform UI framework for Windjammer (Web, Desktop, Mobile)
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

use super::traits::Renderable

pub struct TabPanelTab {
    id: string,
    title: string,
    content: string,
}

impl TabPanelTab {
    pub fn new(id: string, title: string, content: string) -> TabPanelTab {
        TabPanelTab {
            id,
            title,
            content,
        }
    }
}

pub struct TabPanel {
    tabs: Vec<TabPanelTab>,
    active: string,
    orientation: string,
}

impl TabPanel {
    pub fn new() -> TabPanel {
        TabPanel {
            tabs: Vec::new(),
            active: "".to_string(),
            orientation: "horizontal".to_string(),
        }
    }

    pub fn tab(self, tab: TabPanelTab) -> TabPanel {
        self.tabs.push(tab)
        self
    }

    pub fn active(self, id: string) -> TabPanel {
        self.active = id
        self
    }

    pub fn orientation(self, orientation: string) -> TabPanel {
        self.orientation = orientation
        self
    }

}

impl Renderable for TabPanel {
fn render(self) -> string {
        let flex_direction = if self.orientation == "vertical" { "row" } else { "column" }

        let mut tabs_html = format!("<div class='wj-tab-panel-tabs wj-tab-panel-{}'>\n", self.orientation)

        let mut i = 0
        while i < self.tabs.len() {
            let tab = &self.tabs[i]
            let active_class = if tab.id == self.active { " wj-tab-active" } else { "" }

            tabs_html = format!("{}  <button class='wj-tab-panel-tab{}' data-id='{}'>{}</button>\n",
                tabs_html, active_class, tab.id, tab.title)

            i = i + 1
        }

        tabs_html = format!("{}</div>\n", tabs_html)

        let mut content_html = "<div class='wj-tab-panel-content'>\n".to_string()

        let mut j = 0
        while j < self.tabs.len() {
            let tab = &self.tabs[j]
            let display = if tab.id == self.active { "block" } else { "none" }

            content_html = format!("{}  <div class='wj-tab-panel-pane' data-id='{}' style='display: {};'>\n    {}\n  </div>\n",
                content_html, tab.id, display, tab.content)

            j = j + 1
        }

        content_html = format!("{}</div>", content_html)

        format!("<div class='wj-tab-panel' style='display: flex; flex-direction: {};'>\n{}{}\n</div>",
            flex_direction, tabs_html, content_html)
    }
}

fn main() {
    let panel = TabPanel::new()
        .tab(TabPanelTab::new("overview".to_string(), "Overview".to_string(), "<h2>Overview Content</h2>".to_string()))
        .tab(TabPanelTab::new("details".to_string(), "Details".to_string(), "<h2>Details Content</h2>".to_string()))
        .tab(TabPanelTab::new("settings".to_string(), "Settings".to_string(), "<h2>Settings Content</h2>".to_string()))
        .active("overview".to_string())

    println!("{}", panel.render())
}