dioxus-tw-components 0.2.11

Components made for Dioxus
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

use crate::components::icon::*;
use dioxus::prelude::*;
use dioxus_core::AttributeValue;

#[derive(Clone, PartialEq, Props)]
pub struct CalloutProps {
    #[props(extends = div, extends = GlobalAttributes)]
    attributes: Vec<Attribute>,

    title: std::string::String,

    #[props(optional, default)]
    pub icon: Option<Icons>,

    children: Element,
}

#[component]
pub fn Callout(mut props: CalloutProps) -> Element {
    let icon = if let Some(data_attribute) = props
        .attributes
        .iter()
        .find(|attr| attr.name == "data-variant")
    {
        if let AttributeValue::Text(ref value) = data_attribute.value {
            match value.as_str() {
                "tip" => Icons::Lightbulb,
                "warning" => Icons::Warning,
                "caution" => Icons::Report,
                "info" | &_ => Icons::Info,
            }
        } else {
            Icons::Info
        }
    } else {
        Icons::Info
    };

    let default_classes = "callout";
    crate::setup_class_attribute(&mut props.attributes, default_classes);

    rsx! {
        div {..props.attributes,
            div { style: "display: flex; flex-direction: row; vertical-align: middle; overflow-wrap: break-word; word-break: break-word; min-width: 0;",
                Icon {
                    style: "margin-right: 0.5rem; font-size: 0.875rem;",
                    icon: if props.icon.is_some() { props.icon.unwrap() } else { icon },
                }
                "{props.title}"
            }
            div { style: "font-size: 0.875rem; color: color-mix(in oklab, var(--foreground) 70%, transparent); overflow-wrap: break-word; word-break: break-word; min-width: 0;",
                {props.children}
            }
        }
    }
}