leptos-bootstrap 0.0.2

Bootstrap styled components for leptos.
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

use leptos::prelude::*;
use std::fmt;

pub enum ButtonKind {
    Primary,
    Secondary,
    Success,
    Danger,
    Warning,
    Info,
    Light,
    Dark,
    Link,
    OutlinePrimary,
    OutlineSecondary,
    OutlineSuccess,
    OutlineDanger,
    OutlineWarning,
    OutlineInfo,
    OutlineLight,
    OutlineDark,
    Close,
}

impl fmt::Display for ButtonKind {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        let s = match self {
            Self::Primary => "btn-primary",
            Self::Secondary => "btn-secondary",
            Self::Success => "btn-success",
            Self::Danger => "btn-danger",
            Self::Warning => "btn-warning",
            Self::Info => "btn-info",
            Self::Light => "btn-light",
            Self::Dark => "btn-dark",
            Self::Link => "btn-link",
            Self::OutlinePrimary => "btn-outline-primary",
            Self::OutlineSecondary => "btn-outline-secondary",
            Self::OutlineSuccess => "btn-outline-success",
            Self::OutlineDanger => "btn-outline-danger",
            Self::OutlineWarning => "btn-outline-warning",
            Self::OutlineInfo => "btn-outline-info",
            Self::OutlineLight => "btn-outline-light",
            Self::OutlineDark => "btn-outline-dark",
            Self::Close => "btn-close",
        };
        write!(f, "{}", s)
    }
}

pub enum ButtonSize {
    Small,
    Normal,
    Large,
}

impl fmt::Display for ButtonSize {
    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
        let s = match self {
            Self::Small => "btn-sm",
            Self::Normal => "",
            Self::Large => "btn-lg",
        };
        write!(f, "{}", s)
    }
}

#[component]
pub fn Button<'a>(
    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
    #[prop(default = false)] disabled: bool,
    #[prop(default = false)] active: bool,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let mut class = format!("btn {} {} {}", kind, size, class.trim());
    if active {
        class.push_str(" active");
    }
    view! {
        <button type="button" class=class disabled=disabled>
            {children()}
        </button>
    }
}

#[component]
pub fn ButtonGroup<'a>(
    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
    #[prop(optional, into)] class: &'a str,
    children: Children,
) -> impl IntoView {
    let class = format!("btn-group {} {}", size, class.trim());
    view! {
        <div class=class role="group">
            {children()}
        </div>
    }
}