leptos_bootstrap/v5/
dropdown.rs

1use leptos::prelude::*;
2
3use crate::v5::{ButtonKind, ButtonSize};
4
5#[component]
6pub fn DropDown<'a>(
7    #[prop(optional, into)] label: &'a str,
8    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
9    #[prop(optional, into)] class: &'a str,
10    children: Children,
11) -> impl IntoView {
12    let dropdown_class = format!("dropdown {}", class);
13    let btn_class = format!("btn dropdown-toggle {}", kind);
14    view! {
15        <div class=dropdown_class>
16            <button class=btn_class type="button" data-bs-toggle="dropdown" aria-expanded="false">
17                {label}
18            </button>
19            <ul class="dropdown-menu">{children()}</ul>
20        </div>
21    }
22}
23
24#[component]
25pub fn DropDownItem<'a>(
26    #[prop(default = "#", into)] href: &'a str,
27    #[prop(optional, into)] class: &'a str,
28    children: Children,
29) -> impl IntoView {
30    let class = format!("dropdown-item {}", class);
31    view! {
32        <li>
33            <a class=class href=href>
34                {children()}
35            </a>
36        </li>
37    }
38}
39
40#[component]
41pub fn DropDownDivider() -> impl IntoView {
42    view! {
43        <li>
44            <hr class="dropdown-divider" />
45        </li>
46    }
47}
48
49#[component]
50pub fn SplitButton<'a>(
51    #[prop(optional, into)] label: &'a str,
52    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
53    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
54    #[prop(optional, into)] class: &'a str,
55    children: Children,
56) -> impl IntoView {
57    let btn_class = format!("btn {} {}", size, class);
58    let dropdown_class = format!(
59        "btn dropdown-toggle dropdown-toggle-split {} {}",
60        kind, size
61    );
62    view! {
63        <div class="btn-group">
64            <button type="button" class=btn_class>
65                {label}
66            </button>
67            <button
68                type="button"
69                class=dropdown_class
70                data-bs-toggle="dropdown"
71                aria-expanded="false"
72            >
73                <span class="visually-hidden">Toggle Dropdown</span>
74            </button>
75            <ul class="dropdown-menu">{children()}</ul>
76        </div>
77    }
78}
leptos_bootstrap/v5/dropdown.rs

leptos_bootstrap/v5/
dropdown.rs
