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