dioxus_material/
chip.rs

1use crate::{use_theme, Icon, IconKind, Ripple};
2use dioxus::prelude::*;
3
4/// Chip component.
5///
6/// Chips help people enter information, make selections, filter content, or trigger actions.
7///
8/// [material.io](https://m3.material.io/components/chips)
9///
10/// ## Panics
11/// This component requires access to a [`Theme`](crate::Theme) and [`IconFont`](crate::IconFont).
12///
13/// ## Examples
14/// ```rust
15///
16/// use dioxus::prelude::*;
17/// use dioxus_material::{Chip, Theme, IconFont};
18///
19/// fn app() -> Element {
20///     rsx!(Theme {
21///         IconFont {}
22///         div { display: "flex", gap: "10px",
23///             Chip { onclick: |_| {}, "Asset chip" }
24///             Chip { is_selected: true, onclick: |_| {}, "Asset chip" }
25///         }
26///     })
27/// }
28/// ```
29#[component]
30pub fn Chip(
31    children: Element,
32    is_selected: Option<bool>,
33    onclick: EventHandler<Event<MouseData>>,
34) -> Element {
35    let theme = use_theme();
36    let (border_color, background) = if is_selected == Some(true) {
37        (
38            &*theme.secondary_container_color,
39            &*theme.secondary_container_color,
40        )
41    } else {
42        ("#79747E", "none")
43    };
44
45    rsx!(
46        div {
47            display: "inline-flex",
48            flex_direction: "row",
49            align_items: "center",
50            height: "32px",
51            line_height: "32px",
52            border_radius: "{theme.border_radius_small}",
53            font_family: "sans-serif",
54            font_size: "14px",
55            font_weight: 500,
56            border: "1px solid {border_color}",
57            background,
58            Ripple { onclick: move |event| onclick.call(event),
59                div {
60                    display: "inline-flex",
61                    flex_direction: "row",
62                    align_items: "center",
63                    if is_selected == Some(true) {
64                        Icon { kind: IconKind::Check }
65                    }
66
67                    div { padding: "0 14px", {children} }
68                }
69            }
70        }
71    )
72}
dioxus_material/chip.rs

dioxus_material/
chip.rs
