patternfly_dioxus/
tabs.rs

1
2use dioxus::{prelude::*};
3
4
5#[allow(non_snake_case,dead_code)]
6#[inline_props]
7pub fn PfTabs<'a>(cx: Scope<'a>, selected_contents: UseState<String>, children: Element<'a>) -> Element<'a> {
8    cx.render(rsx! {
9        div { class: "pf-c-tabs",
10            button { class: "pf-c-tabs__scroll-button", r#type: "button", disabled: "false", aria_hidden: "false", aria_label: "Scroll left",
11                i { class: "fas fa-angle-left", aria_hidden: "true" }
12            }
13            ul { class: "pf-c-tabs__list",
14                children
15            }
16
17        } 
18        section {
19            class: "pf-c-tab-content",
20            role: "tabpanel",
21            hidden: "false",
22            span {
23                dangerous_inner_html:"{selected_contents}",
24            }
25
26            
27        }        
28    }) 
29}
30
31#[allow(non_snake_case,dead_code)]
32#[inline_props]
33pub fn PfTab<'a>(cx: Scope<'a>, title: &'a str,selected_contents: UseState<String>, children: Element<'a>) -> Element {
34
35    //I didn't know how to use children to `use_atom_state`, So I converted the element to a string
36    let children_string = dioxus_ssr::render_lazy(rsx!{span{children}});
37    
38    
39    cx.render(rsx! {
40        li { class: "pf-c-tabs__item",
41            button { r#type: "button", class: "pf-c-tabs__link", onclick: move |_| {selected_contents.set(children_string.clone());}  ,  "{title}"
42                span { class: "pf-c-tabs__item-text"}
43            }
44        }
45    })
46}
47
patternfly_dioxus/tabs.rs

patternfly_dioxus/
tabs.rs
