Crate yew_bootstrap

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.21"
yew-bootstrap = "*"

To use form callback functions, the following dependencies should be added:

[dependencies]
wasm-bindgen = "0.2.*"
web-sys = { version = "0.3.*", features = ["HtmlTextAreaElement", "HtmlSelectElement"] }

Some components need features to be enabled, for example:

[dependencies]
yew = "0.21"
yew-bootstrap = { version = "*", features = ["searchable_select"] }

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

This project uses semantic versioning.

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 ([component::Card], [component::CardGroup])
• Carousel
• Close button
• Collapse
• Dropdown
• List group (component::ListGroup, component::ListGroupItem)
• Modal (component::Modal)
• Navbar (component::NavBar, component::NavItem, component::NavDropdown, component::NavDropdownItem)
• Navs & tabs
• Offcanvas
• Pagination
• Placeholders
• Popovers
• Progress (component::Progress, component::ProgressBar)
• Scrollspy
• Spinner (component::Spinner)
• Toast
• Tooltips (component::Tooltip)

Helpers

• Clearfix
• Colored links (component::Link)
• Stacks
• Stretched (component::Link with stretched={true}>)
• Text truncation
• Vertical/Horizontal rule/line (component::Line)

Extra components

Some additional components are provided, not strictly part of Bootstrap, but based on Boostrap components.

• Searchable select ([component::SearchableSelect]) - Requires feature “searchable_select”

  A component similar to a Select showing a field to filter the items.

Features

searchable_select

Enables the [component::SearchableSelect], which requires additional dependencies.

Examples

Several examples are provided:

• examples/basics: Components
• examples/forms: Form fields
• examples/searchable_select: Searchable Select component

To run an example:

cd examples/<directory>
trunk --serve

Modules

component

Components supported by this crate are listed here

icons

Access to bootstrap-icons.

util

Helper functions and types are listed here, for example util::Color and the util::include_cdn function.