maud_ui/primitives/
input_group.rs

1//! InputGroup component — input with prefix/suffix addons as one visual unit.
2use maud::{html, Markup};
3
4pub struct InputGroupProps {
5    pub prefix: Option<Markup>,
6    pub suffix: Option<Markup>,
7    pub children: Markup,
8}
9
10pub fn render(props: InputGroupProps) -> Markup {
11    html! {
12        div.mui-input-group {
13            @if let Some(prefix) = props.prefix {
14                span.mui-input-group__prefix { (prefix) }
15            }
16            (props.children)
17            @if let Some(suffix) = props.suffix {
18                span.mui-input-group__suffix { (suffix) }
19            }
20        }
21    }
22}
23
24pub fn showcase() -> Markup {
25    html! {
26        div class="mui-showcase-section" {
27            h3 { "Input with $ prefix" }
28            (render(InputGroupProps {
29                prefix: Some(html! { "$" }),
30                suffix: None,
31                children: html! { input type="text" placeholder="Amount" {} },
32            }))
33        }
34
35        div class="mui-showcase-section" {
36            h3 { "Input with .com suffix" }
37            (render(InputGroupProps {
38                prefix: None,
39                suffix: Some(html! { ".com" }),
40                children: html! { input type="text" placeholder="Domain" {} },
41            }))
42        }
43
44        div class="mui-showcase-section" {
45            h3 { "Input with https:// prefix and Go button" }
46            (render(InputGroupProps {
47                prefix: Some(html! { "https://" }),
48                suffix: Some(html! { button { "Go" } }),
49                children: html! { input type="text" placeholder="URL" {} },
50            }))
51        }
52
53        div class="mui-showcase-section" {
54            h3 { "Email with @ prefix" }
55            (render(InputGroupProps {
56                prefix: Some(html! { "@" }),
57                suffix: None,
58                children: html! { input type="email" placeholder="username" {} },
59            }))
60        }
61    }
62}
maud_ui/primitives/input_group.rs

maud_ui/primitives/
input_group.rs
