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-v6-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 {class} aria-label={&props.aria_label} style={&props.style} id={&props.id}>
54            { props.children.clone() }
55        </div>
56    )
57}
58
59/// Input group text, as child of [`InputGroupItem`]
60#[function_component(InputGroupText)]
61pub fn input_group_text(props: &ChildrenProperties) -> Html {
62    html!(<span class="pf-v6-c-input-group__text">{ props.children.clone() }</span>)
63}
64
65#[derive(Clone, Debug, PartialEq, Properties)]
66pub struct InputGroupItemProperties {
67    /// The element's ID
68    #[prop_or_default]
69    pub id: Option<AttrValue>,
70
71    #[prop_or_default]
72    pub class: Classes,
73
74    #[prop_or_default]
75    pub style: Option<AttrValue>,
76
77    #[prop_or_default]
78    pub plain: bool,
79
80    #[prop_or_default]
81    pub fill: bool,
82
83    #[prop_or_default]
84    pub r#box: bool,
85
86    #[prop_or_default]
87    pub disabled: bool,
88
89    #[prop_or_default]
90    pub children: Html,
91}
92
93/// Additional item on an input group.
94#[function_component(InputGroupItem)]
95pub fn input_group_item(props: &InputGroupItemProperties) -> Html {
96    let mut class = classes!("pf-v6-c-input-group__item");
97
98    if props.plain {
99        class.push(classes!("pf-m-plain"));
100    }
101
102    if props.fill {
103        class.push(classes!("pf-m-fill"));
104    }
105
106    if props.r#box {
107        class.push(classes!("pf-m-box"));
108    }
109
110    if props.disabled {
111        class.push(classes!("pf-m-disabled"));
112    }
113
114    class.extend(props.class.clone());
115
116    html!(<div {class} id={&props.id} style={&props.style}>{ props.children.clone() }</div>)
117}
patternfly_yew/components/input_group.rs

patternfly_yew/components/
input_group.rs
