leptos_bootstrap/v5/
button.rs1use leptos::prelude::*;
2use std::fmt;
3
4pub enum ButtonKind {
5 Primary,
6 Secondary,
7 Success,
8 Danger,
9 Warning,
10 Info,
11 Light,
12 Dark,
13 Link,
14 OutlinePrimary,
15 OutlineSecondary,
16 OutlineSuccess,
17 OutlineDanger,
18 OutlineWarning,
19 OutlineInfo,
20 OutlineLight,
21 OutlineDark,
22 Close,
23}
24
25impl fmt::Display for ButtonKind {
26 fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
27 let s = match self {
28 Self::Primary => "btn-primary",
29 Self::Secondary => "btn-secondary",
30 Self::Success => "btn-success",
31 Self::Danger => "btn-danger",
32 Self::Warning => "btn-warning",
33 Self::Info => "btn-info",
34 Self::Light => "btn-light",
35 Self::Dark => "btn-dark",
36 Self::Link => "btn-link",
37 Self::OutlinePrimary => "btn-outline-primary",
38 Self::OutlineSecondary => "btn-outline-secondary",
39 Self::OutlineSuccess => "btn-outline-success",
40 Self::OutlineDanger => "btn-outline-danger",
41 Self::OutlineWarning => "btn-outline-warning",
42 Self::OutlineInfo => "btn-outline-info",
43 Self::OutlineLight => "btn-outline-light",
44 Self::OutlineDark => "btn-outline-dark",
45 Self::Close => "btn-close",
46 };
47 write!(f, "{}", s)
48 }
49}
50
51pub enum ButtonSize {
52 Small,
53 Normal,
54 Large,
55}
56
57impl fmt::Display for ButtonSize {
58 fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
59 let s = match self {
60 Self::Small => "btn-sm",
61 Self::Normal => "",
62 Self::Large => "btn-lg",
63 };
64 write!(f, "{}", s)
65 }
66}
67
68#[component]
69pub fn Button<'a>(
70 #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
71 #[prop(default = ButtonSize::Normal)] size: ButtonSize,
72 #[prop(default = false)] disabled: bool,
73 #[prop(default = false)] active: bool,
74 #[prop(optional, into)] class: &'a str,
75 children: Children,
76) -> impl IntoView {
77 let mut class = format!("btn {} {} {}", kind, size, class.trim());
78 if active {
79 class.push_str(" active");
80 }
81 view! {
82 <button type="button" class=class disabled=disabled>
83 {children()}
84 </button>
85 }
86}
87
88#[component]
89pub fn ButtonGroup<'a>(
90 #[prop(default = ButtonSize::Normal)] size: ButtonSize,
91 #[prop(optional, into)] class: &'a str,
92 children: Children,
93) -> impl IntoView {
94 let class = format!("btn-group {} {}", size, class.trim());
95 view! {
96 <div class=class role="group">
97 {children()}
98 </div>
99 }
100}