zino-dioxus 0.11.0

Dioxus components for zino.
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

use crate::class::Class;
use dioxus::prelude::*;
use zino_core::SharedString;

/// A container for the form field with a label.
pub fn FormFieldContainer(props: FormFieldContainerProps) -> Element {
    rsx! {
        div {
            class: props.class,
            div {
                class: props.field_label_class,
                label {
                    class: props.label_class,
                    { props.label }
                }
            }
            div {
                class: props.field_body_class,
                { props.children }
            }
        }
    }
}

/// The [`FormFieldContainer`] properties struct for the configuration of the component.
#[derive(Clone, PartialEq, Props)]
pub struct FormFieldContainerProps {
    /// The class attribute for the component.
    #[props(into, default = "field is-horizontal")]
    pub class: Class,
    /// A class to apply to the field label container.
    #[props(into, default = "field-label")]
    pub field_label_class: Class,
    /// A class to apply to the field body container.
    #[props(into, default = "field-body")]
    pub field_body_class: Class,
    /// A class to apply to the `label` element.
    #[props(into, default = "label")]
    pub label_class: Class,
    /// The label content.
    #[props(into)]
    pub label: SharedString,
    /// The children to render within the component.
    children: Element,
}

/// A single field with the form control.
pub fn FormField(props: FormFieldProps) -> Element {
    rsx! {
        div {
            class: props.class,
            div {
                class: "{props.control_class}",
                class: if props.expanded { "is-expanded" },
                { props.children }
            }
        }
    }
}

/// The [`FormField`] properties struct for the configuration of the component.
#[derive(Clone, PartialEq, Props)]
pub struct FormFieldProps {
    /// The class attribute for the component.
    #[props(into, default = "field")]
    pub class: Class,
    /// A class to apply custom styles.
    #[props(into, default = "control")]
    pub control_class: Class,
    /// A flag to determine whether the control is expanded or not.
    #[props(default = false)]
    pub expanded: bool,
    /// The children to render within the component.
    children: Element,
}

/// Grouped fields with the form control.
pub fn FormGroup(props: FormGroupProps) -> Element {
    rsx! {
        div {
            class: "{props.class}",
            class: if props.align == "center" { "is-grouped-centered" },
            class: if props.align == "right" { "is-grouped-right" },
            for item in props.items.iter() {
                div {
                    class: props.control_class.clone(),
                    { item }
                }
            }
        }
    }
}

/// The [`FormGroup`] properties struct for the configuration of the component.
#[derive(Clone, PartialEq, Props)]
pub struct FormGroupProps {
    /// The class attribute for the component.
    #[props(into, default = "field is-grouped")]
    pub class: Class,
    /// A class to apply custom styles.
    #[props(into, default = "control")]
    pub control_class: Class,
    /// The alignment of the group: `left` | `center` | `right`.
    #[props(into, default)]
    pub align: SharedString,
    /// The items to be grouped.
    #[props(into)]
    pub items: Vec<Element>,
}

/// Attaches inputs, buttons, and dropdowns together with the form control.
pub fn FormAddons(props: FormAddonsProps) -> Element {
    rsx! {
        div {
            class: props.class,
            for (index, item) in props.items.iter().enumerate() {
                div {
                    class: "{props.control_class}",
                    class: if props.expand == index + 1 { "is-expanded" },
                    { item }
                }
            }
        }
    }
}

/// The [`FormAddons`] properties struct for the configuration of the component.
#[derive(Clone, PartialEq, Props)]
pub struct FormAddonsProps {
    /// The class attribute for the component.
    #[props(into, default = "field has-addons")]
    pub class: Class,
    /// A class to apply custom styles.
    #[props(into, default = "control")]
    pub control_class: Class,
    /// A modifier to expand the `n`th element to fill up the remaining space.
    #[props(default = 0)]
    pub expand: usize,
    /// The items to be grouped.
    #[props(into)]
    pub items: Vec<Element>,
}