patternfly_yew/components/
input_group.rs

1//! Input group
2
3use crate::prelude::ChildrenProperties;
4use yew::prelude::*;
5
6/// Properties for [`InputGroup`]
7#[derive(Clone, PartialEq, Properties)]
8pub struct InputGroupProperties {
9    #[prop_or_default]
10    pub class: Classes,
11
12    #[prop_or_default]
13    pub id: Option<AttrValue>,
14
15    #[prop_or_default]
16    pub style: Option<AttrValue>,
17
18    #[prop_or_default]
19    pub children: Html,
20
21    #[prop_or_default]
22    pub plain: bool,
23
24    #[prop_or_default]
25    pub aria_label: AttrValue,
26}
27
28/// Input group component
29///
30/// > An **input group** groups multiple related controls or inputs together so they appear as one control.
31///
32/// See: <https://www.patternfly.org/components/input-group>
33///
34/// ## Properties
35///
36/// Defined in [`InputGroupProperties`].
37///
38/// ## Children
39///
40/// Input groups can have form elements as their children, and also make use of the
41/// [`InputGroupItem`] component to amend the input group with additional content.
42#[function_component(InputGroup)]
43pub fn input_group(props: &InputGroupProperties) -> Html {
44    let mut class = classes!("pf-v5-c-input-group");
45
46    class.extend(props.class.clone());
47
48    if props.plain {
49        class.push(classes!("pf-m-plain"));
50    }
51
52    html! (
53        <div
54            {class}
55            aria-label={&props.aria_label}
56            style={&props.style}
57            id={&props.id}
58        >
59            { props.children.clone() }
60        </div>
61    )
62}
63
64/// Input group text, as child of [`InputGroupItem`]
65#[function_component(InputGroupText)]
66pub fn input_group_text(props: &ChildrenProperties) -> Html {
67    html!(
68        <span class={"pf-v5-c-input-group__text"}>
69            { props.children.clone() }
70        </span>
71    )
72}
73
74#[derive(Clone, Debug, PartialEq, Properties)]
75pub struct InputGroupItemProperties {
76    /// The element's ID
77    #[prop_or_default]
78    pub id: Option<AttrValue>,
79
80    #[prop_or_default]
81    pub class: Classes,
82
83    #[prop_or_default]
84    pub style: Option<AttrValue>,
85
86    #[prop_or_default]
87    pub plain: bool,
88
89    #[prop_or_default]
90    pub fill: bool,
91
92    #[prop_or_default]
93    pub r#box: bool,
94
95    #[prop_or_default]
96    pub disabled: bool,
97
98    #[prop_or_default]
99    pub children: Html,
100}
101
102/// Additional item on an input group.
103#[function_component(InputGroupItem)]
104pub fn input_group_item(props: &InputGroupItemProperties) -> Html {
105    let mut class = classes!("pf-v5-c-input-group__item");
106
107    if props.plain {
108        class.push(classes!("pf-m-plain"));
109    }
110
111    if props.fill {
112        class.push(classes!("pf-m-fill"));
113    }
114
115    if props.r#box {
116        class.push(classes!("pf-m-box"));
117    }
118
119    if props.disabled {
120        class.push(classes!("pf-m-disabled"));
121    }
122
123    class.extend(props.class.clone());
124
125    html!(
126        <div {class} id={&props.id} style={&props.style}>
127            { props.children.clone() }
128        </div>
129    )
130}
patternfly_yew/components/input_group.rs

patternfly_yew/components/
input_group.rs
