Crate yew_bootstrap
source ·Expand description
§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
: Componentsexamples/forms
: Form fields
To run an example:
cd examples/<directory>
trunk --serve
Modules§
- Components supported by this crate are listed here
- Access to bootstrap-icons.
- Helper functions and types are listed here, for example util::Color and the util::include_cdn function.