Patternfly components for Dioxus

Dioxus Component for Patternfly.

setup

npm i @patternfly/patternfly --save

append to index.html

```

```

incompatible change

v0.2.1

PfTab component: This component was using GlobalState, but we changed it to pass UseState to both parent and child.

Currently available components.

working ...

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::>().join(", "); let strstate = usestate(&cx, || "".tostring()); let vecstate: &UseState> = usestate(&cx, || vec!["aaa".tostring(),"bbb".tostring()]);

let tab_selected_contents = use_state(&cx, || "".to_string());

cx.render(rsx! {
    div{
        "aaa",
        PfBadge {
            read: true,
            "1"
        }
        PfBadge {
            read: false,
            "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 {}

        // Set the same state for the selected_contents attribute.
        // The content information of the tab selected by this UseState<String> is synchronized with the upper element.
        PfTabs {
            selected_contents: tab_selected_contents.clone(),
            PfTab {
                selected_contents: tab_selected_contents.clone(),
                title: "tab1",
                "tab1-content"
            },
            PfTab {
                selected_contents: tab_selected_contents.clone(),
                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),
        PfSmallModal{
            title: "toast", is_close: smallmodal_is_open,
            PfAlert{
                variation: Variation::Danger,
                title: "title",
                "this modal will be close after 5 seconds"
            }
        }
        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" }
            }
        },

           div { class: "pf-l-bullseye",

        PfCard {
            PfCardBody{
                div {style:"color: red; width: 220px;text-align: center;","aaa",}
            }
        }
        PfCard {
            PfCardBody{
                div {style:"color: red;","bbb",}
            }
        }

    }
    PfLabel{
        "label"
    }
    PfLabel {
        icon_name: "fa-info-circle",
        append_class: "pf-m-blue",
        "blue label"
    }
    PfLabelGroup{
        selected: vec_state,
    }

})

    }
    div { class: "pf-l-bullseye",

        PfCard {
            PfCardBody{
                div {style:"color: red; width: 220px;text-align: center;","aaa",}
            }
        }
        PfCard {
            PfCardBody{
                div {style:"color: red;","bbb",}
            }
        }

    }
    PfLabel{
        "label"
    }
    PfLabel {
        icon_name: "fa-info-circle",
        append_class: "pf-m-blue",
        "blue label"
    }
    PfLabelGroup{
        selected: vec_state,
    }

})

} ```