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">
20                {children()}
21            </ul>
22        </div>
23    }
24}
25
26#[component]
27pub fn DropDownItem<'a>(
28    #[prop(default = "#", into)] href: &'a str,
29    #[prop(optional, into)] class: &'a str,
30    children: Children,
31) -> impl IntoView {
32    let class = format!("dropdown-item {}", class);
33    view! {
34        <li>
35            <a class=class href=href>{children()}</a>
36        </li>
37    }
38}
39
40#[component]
41pub fn DropDownDivider() -> impl IntoView {
42    view! {
43        <li><hr class="dropdown-divider" /></li>
44    }
45}
46
47#[component]
48pub fn SplitButton<'a>(
49    #[prop(optional, into)] label: &'a str,
50    #[prop(default = ButtonKind::Primary)] kind: ButtonKind,
51    #[prop(default = ButtonSize::Normal)] size: ButtonSize,
52    #[prop(optional, into)] class: &'a str,
53    children: Children,
54) -> impl IntoView {
55    let btn_class = format!("btn {} {}", size, class);
56    let dropdown_class = format!(
57        "btn dropdown-toggle dropdown-toggle-split {} {}",
58        kind, size
59    );
60    view! {
61        <div class="btn-group">
62            <button type="button" class=btn_class>{label}</button>
63            <button type="button" class=dropdown_class data-bs-toggle="dropdown" aria-expanded="false">
64                <span class="visually-hidden">Toggle Dropdown</span>
65            </button>
66            <ul class="dropdown-menu">
67                {children()}
68            </ul>
69        </div>
70    }
71}
leptos_bootstrap/v5/dropdown.rs

leptos_bootstrap/v5/
dropdown.rs
