maud-ui 0.1.0

58 headless, accessible UI components for Rust web apps. Built on maud + htmx, styled like shadcn/ui.
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

//! InputGroup component — input with prefix/suffix addons as one visual unit.
use maud::{html, Markup};

pub struct InputGroupProps {
    pub prefix: Option<Markup>,
    pub suffix: Option<Markup>,
    pub children: Markup,
}

pub fn render(props: InputGroupProps) -> Markup {
    html! {
        div.mui-input-group {
            @if let Some(prefix) = props.prefix {
                span.mui-input-group__prefix { (prefix) }
            }
            (props.children)
            @if let Some(suffix) = props.suffix {
                span.mui-input-group__suffix { (suffix) }
            }
        }
    }
}

pub fn showcase() -> Markup {
    html! {
        div class="mui-showcase-section" {
            h3 { "Input with $ prefix" }
            (render(InputGroupProps {
                prefix: Some(html! { "$" }),
                suffix: None,
                children: html! { input type="text" placeholder="Amount" {} },
            }))
        }

        div class="mui-showcase-section" {
            h3 { "Input with .com suffix" }
            (render(InputGroupProps {
                prefix: None,
                suffix: Some(html! { ".com" }),
                children: html! { input type="text" placeholder="Domain" {} },
            }))
        }

        div class="mui-showcase-section" {
            h3 { "Input with https:// prefix and Go button" }
            (render(InputGroupProps {
                prefix: Some(html! { "https://" }),
                suffix: Some(html! { button { "Go" } }),
                children: html! { input type="text" placeholder="URL" {} },
            }))
        }

        div class="mui-showcase-section" {
            h3 { "Email with @ prefix" }
            (render(InputGroupProps {
                prefix: Some(html! { "@" }),
                suffix: None,
                children: html! { input type="email" placeholder="username" {} },
            }))
        }
    }
}