dioxus_bootstrap_css/
lib.rs

1//! # dioxus-bootstrap-css
2//!
3//! Type-safe Bootstrap 5.3 components for [Dioxus](https://dioxuslabs.com/).
4//!
5//! This crate provides a 1-to-1 mapping of every Bootstrap 5.3 component as Dioxus RSX
6//! components. All interactive behaviors (modals, dropdowns, accordions, carousels, etc.)
7//! are driven by Dioxus signals — **zero JavaScript required**.
8//!
9//! ## Quick Start
10//!
11//! ```rust,no_run
12//! use dioxus::prelude::*;
13//! use dioxus_bootstrap_css::prelude::*;
14//!
15//! fn app() -> Element {
16//!     let theme = use_signal(|| Theme::Dark);
17//!     rsx! {
18//!         ThemeProvider { theme }
19//!         BootstrapHead {}
20//!         Container {
21//!             h1 { "Hello Bootstrap!" }
22//!             Button { color: Color::Primary, "Click me" }
23//!         }
24//!     }
25//! }
26//! ```
27//!
28//! ## Bootstrap HTML → Dioxus RSX
29//!
30//! | Bootstrap HTML | Dioxus RSX |
31//! |---|---|
32//! | `<div class="container">` | `Container { }` |
33//! | `<div class="row"><div class="col-md-6">` | `Row { Col { md: ColumnSize::Span(6) } }` |
34//! | `<button class="btn btn-primary">` | `Button { color: Color::Primary }` |
35//! | `<a class="btn btn-primary" href="/page">` | `Button { color: Color::Primary, href: "/page" }` |
36//! | `<div class="card"><div class="card-body">` | `Card { body: rsx! { } }` |
37//! | `<div class="alert alert-danger">` | `Alert { color: Color::Danger }` |
38//! | `<span class="badge text-bg-success">` | `Badge { color: Color::Success }` |
39//! | `<i class="bi bi-search">` | `Icon { name: "search" }` |
40//! | `<div class="modal">` + JS | `Modal { show: signal, title: "..." }` |
41//! | `<div class="dropdown">` + JS | `Dropdown { open: signal, toggle: rsx! { }, menu: rsx! { } }` |
42//! | `<div class="carousel">` + JS | `Carousel { active: signal, slides: vec![...] }` |
43//! | `<div class="accordion">` + JS | `Accordion { open: signal }` |
44//! | `<div class="toast">` + JS | `Toast { show: signal, title: "..." }` |
45//! | `<div class="offcanvas">` + JS | `Offcanvas { show: signal, title: "..." }` |
46//! | `<div class="tooltip">` + JS | `Tooltip { text: "...", children }` |
47//! | `<div class="popover">` + JS | `Popover { title: "...", body: rsx! { }, children }` |
48//! | `<html data-bs-theme="dark">` | `ThemeProvider { theme: signal }` |
49//! | `<nav><ol class="breadcrumb">` | `Breadcrumb { BreadcrumbItem { } }` |
50//! | `<ul class="list-group">` | `ListGroup { ListGroupItem { } }` |
51//! | `<div class="input-group">` | `InputGroup { InputGroupText { }, Input { } }` |
52//! | `<div class="progress">` | `Progress { ProgressBar { value: 50.0 } }` |
53//! | `<div class="spinner-border">` | `Spinner { }` |
54//! | `data-bs-spy="scroll"` | `Scrollspy { target: "body", active: signal }` |
55//!
56//! ## Modules
57//!
58//! Every Bootstrap component has its own module. Import everything via the [`prelude`].
59
60pub mod accordion;
61pub mod alert;
62pub mod badge;
63pub mod breadcrumb;
64pub mod button;
65pub mod card;
66pub mod carousel;
67pub mod collapse;
68pub mod dropdown;
69pub mod figure;
70pub mod form;
71pub mod grid;
72pub mod head;
73pub mod icon;
74pub mod input_group;
75pub mod list_group;
76pub mod modal;
77pub mod nav;
78pub mod offcanvas;
79pub mod pagination;
80pub mod placeholder;
81pub mod popover;
82pub mod progress;
83pub mod scrollspy;
84pub mod spinner;
85pub mod table;
86pub mod tabs;
87pub mod theme;
88pub mod toast;
89pub mod tooltip;
90pub mod types;
91
92/// Prelude — import everything with `use dioxus_bootstrap_css::prelude::*`.
93pub mod prelude {
94    pub use crate::accordion::*;
95    pub use crate::alert::*;
96    pub use crate::badge::*;
97    pub use crate::breadcrumb::*;
98    pub use crate::button::*;
99    pub use crate::card::*;
100    pub use crate::carousel::*;
101    pub use crate::collapse::*;
102    pub use crate::dropdown::*;
103    pub use crate::figure::*;
104    pub use crate::form::*;
105    pub use crate::grid::*;
106    pub use crate::head::*;
107    pub use crate::icon::*;
108    pub use crate::input_group::*;
109    pub use crate::list_group::*;
110    pub use crate::modal::*;
111    pub use crate::nav::*;
112    pub use crate::offcanvas::*;
113    pub use crate::pagination::*;
114    pub use crate::placeholder::*;
115    pub use crate::popover::*;
116    pub use crate::progress::*;
117    pub use crate::scrollspy::*;
118    pub use crate::spinner::*;
119    pub use crate::table::*;
120    pub use crate::tabs::*;
121    pub use crate::theme::*;
122    pub use crate::toast::*;
123    pub use crate::tooltip::*;
124    pub use crate::types::*;
125}
dioxus_bootstrap_css/lib.rs

dioxus_bootstrap_css/
lib.rs
