Lib.rs

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: Components
• examples/forms: Form fields

To run an example:

cd examples/<directory>
trunk --serve