21 releases
0.5.18 | Sep 5, 2023 |
---|---|
0.5.16 | Jul 24, 2023 |
0.5.13 | Mar 17, 2023 |
0.5.4 | Dec 12, 2022 |
0.3.0 | Nov 29, 2021 |
#632 in GUI
248 downloads per month
91KB
1.5K
SLoC
Usage
This project assumes that you have an existing web application that uses the Yew framework.
Add the dependency next to the regular yew dependency:
[dependencies]
yew = "0.20"
yew-bootstrap = "0.5"
To use form callback functions, the following dependencies should be added:
[dependencies]
wasm-bindgen = "0.2.*"
web-sys = { version = "0.3.*", features = ["HtmlTextAreaElement", "HtmlSelectElement"] }
Then in the beginning of your application, include the include_cdn()
or include_inline()
function to load the required CSS. Some components require the Bootstrap JavaScript
library to be loaded - for these you can use the include_cdn_js()
function. It is recommended that you put this at the bottom of your html!{}
macro, as done below:
fn view(&self, _ctx: &Context<Self>) -> Html {
html! {
<>
{include_cdn()}
<Button style={Color::Primary}>{"Primary"}</Button>
{include_cdn_js()}
</>
}
}
Check main.rs
for example usage for every implemented component.
Version Convention
0.x.y
Versions that have the same x
value target the same version of Yew.
There is currently no indication of which version of Bootstrap is targeted, however, we’ll try to target the previous release pipeline. For example as of this writing the latest boostrap is 5.2.x, so we’ll try to target the latest 5.1.x version.
Coverage
Core Content
- Container (component::Container)
- Grid (component::Row, component::Column)
- Display headings (component::Display)
- Lead (component::Lead)
- Blockquote
- Image/Figure
- Table
- Forms (component::form::FormControl)
Components
- Accordion (component::Accordion)
- Alert (component::Alert)
- Badge (component::Badge)
- Breadcrumb
- Button (component::Button)
- Button group (component::ButtonGroup)
- Card
- Carousel
- Close button
- Collapse
- Dropdown
- List group
- Modal (component::Modal)
- Navbar (component::NavBar, component::NavItem, component::NavDropdown, component::NavDropdownItem)
- Navs & tabs
- Offcanvas
- Pagination
- Placeholders
- Popovers
- Progress
- Scrollspy
- Spinner (component::Spinner)
- Toast
- Tooltips
Helpers
- Clearfix
- Colored links (component::Link)
- Stacks
- Stretched (component::Link with
stretched={true}>
) - Text truncation
- Vertical/Horizontal rule/line (component::Line)
Examples
Several examples are provided:
examples/basics
: Componentsexamples/forms
: Form fields
To run an example:
cd examples/<directory>
trunk --serve
Dependencies
~10–24MB
~304K SLoC