pib-components-dx-base 0.0.0-upstream-snapshot.2026-09-19.1

temporary fork for Politik im Blick - Dioxus components
Documentation 
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

use super::super::component::*;
use crate::components::avatar::{ImageAvatar, AvatarImageSize};
use crate::components::button::{Button, ButtonVariant};
use dioxus::prelude::*;
use dioxus_icons::lucide::Plus;

const PEOPLE: &[(&str, &str, &str)] = &[
    (
        "jkelleyrtp",
        "jkelleyrtp@dioxuslabs.com",
        "https://github.com/jkelleyrtp.png",
    ),
    (
        "ealmloff",
        "ealmloff@dioxuslabs.com",
        "https://github.com/ealmloff.png",
    ),
    (
        "DioxusLabs",
        "team@dioxuslabs.com",
        "https://github.com/DioxusLabs.png",
    ),
];

#[component]
pub fn Demo() -> Element {
    rsx! {
        div {
            display: "flex",
            flex_direction: "column",
            width: "100%",
            max_width: "28rem",

            ItemGroup {
                for (i , (username , email , avatar)) in PEOPLE.iter().enumerate() {
                    Item {
                        ItemMedia {
                            ImageAvatar {
                                size: AvatarImageSize::Small,
                                src: "{avatar}",
                                alt: "{username}",
                                "{&username[..1].to_uppercase()}"
                            }
                        }
                        ItemContent {
                            ItemTitle { "{username}" }
                            ItemDescription { "{email}" }
                        }
                        ItemActions {
                            Button {
                                variant: ButtonVariant::Ghost,
                                aria_label: "Add {username}",
                                PlusIcon {}
                            }
                        }
                    }
                    if i + 1 < PEOPLE.len() {
                        ItemSeparator {}
                    }
                }
            }
        }
    }
}

#[component]
fn PlusIcon() -> Element {
    rsx! {
        Plus { size: "16" }
    }
}