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
use dioxus::prelude::*;
use crate::types::Size;
/// Bootstrap InputGroup component.
///
/// # Bootstrap HTML → Dioxus
///
/// | HTML | Dioxus |
/// |---|---|
/// | `<div class="input-group">` | `InputGroup { ... }` |
/// | `<div class="input-group input-group-sm">` | `InputGroup { size: Size::Sm, ... }` |
/// | `<span class="input-group-text">@</span>` | `InputGroupText { "@" }` |
///
/// ```rust
/// rsx! {
/// InputGroup {
/// InputGroupText { "@" }
/// Input { placeholder: "Username" }
/// }
/// InputGroup {
/// Input { placeholder: "Search..." }
/// InputGroupText {
/// Button { color: Color::Primary, Icon { name: "search" } }
/// }
/// }
/// }
/// ```
#[derive(Clone, PartialEq, Props)]
pub struct InputGroupProps {
/// Input group size.
#[props(default)]
pub size: Size,
/// Additional CSS classes.
#[props(default)]
pub class: String,
/// Child elements (inputs, InputGroupText, buttons).
pub children: Element,
}
#[component]
pub fn InputGroup(props: InputGroupProps) -> Element {
let size_class = match props.size {
Size::Md => String::new(),
s => format!(" input-group-{s}"),
};
let full_class = if props.class.is_empty() {
format!("input-group{size_class}")
} else {
format!("input-group{size_class} {}", props.class)
};
rsx! {
div { class: "{full_class}", {props.children} }
}
}
/// Text addon for InputGroup.
#[derive(Clone, PartialEq, Props)]
pub struct InputGroupTextProps {
/// Additional CSS classes.
#[props(default)]
pub class: String,
/// Child elements.
pub children: Element,
}
#[component]
pub fn InputGroupText(props: InputGroupTextProps) -> Element {
let full_class = if props.class.is_empty() {
"input-group-text".to_string()
} else {
format!("input-group-text {}", props.class)
};
rsx! {
span { class: "{full_class}", {props.children} }
}
}