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"] }

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

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