Dioxus Component for Patternfly.
npm i @patternfly/patternfly --save
append to index.html
```
```
for examples...
```
fn App(cx: Scope) -> Element {
let date = usestate(&cx, || "2020-03-05".tostring());
let modalisopen = usestate(&cx, || false);
let smallmodalisopen = usestate(&cx, || false);
let chips = vec!["chip1".tostring(), "chip2".tostring(),"chip3".tostring()];
let chipstates = usestate(&cx, || chips);
let chips = chipstates.get().clone();
let chipsstr:String = chips.iter().map(|x| x.clone()).collect::
cx.render(rsx! {
div{
"aaa",
PfBadge {
read: true,
"1"
}
PfAlert {
variation: Variation::Info,
"bbb"
}
PfAlert {
variation: Variation::Danger,
title: "title",
"body"
}
PfAccordion {
title: "title",is_open:true,
"body"
}
PfTooltip {
content: "tooltip", orientation: Orientation::Right,
"ccc"
}
PfDatePicker {
date: date,
}
div { "{date}"}
PfLargeSpinner {}
PfMiddleSpinner {}
PfSmallSpinner {}
PfTabs {
PfTab {
title: "tab1",
"tab1-content"
},
PfTab {
title: "tab2",
span {style:"color:red;", "tab2-content"}
}
}
}
PfModal {
title: "modal", is_close: modal_is_open,
"modal-content"
}
span {hidden: "true",
PfSmallModal{
title: "smallmodal", is_close: smallmodal_is_open,
PfAlert{
variation: Variation::Danger,
title: "title",
"smallmodal-content"
}
}
}
PfToast {
timeout: Duration::from_secs(5),
PfAlert{
variation: Variation::Danger,
title: "title",
"this alert will be closed after 5 seconds"
}
}
PfChip{
"chip"
}
PfChipGroup{
chips: chip_states,
}
"{chips_str}"
br{}
PfDropDown{
list: chips.clone(),selected: str_state.clone(),
}
PfDropDownRaw{
selected: str_state.clone(),
PfDropDownItem{
item_str: "item1".to_string(),
selected: str_state.clone(),
div {
"item1"
i {class: "fas fa-angle-right", aria_hidden: "false" }
}
},
PfDropDownItem{
item_str: "item2".to_string(),
selected: str_state.clone(),
div {
"item2"
i {class: "fas fa-angle-right", aria_hidden: "false" }
}
},
}
})
} ```