Expand description
A Yew component library based on the Bulma CSS framework.
YBC encapsulates all of the structure, style and functionality of the Bulma CSS framework as a set of Yew components. YBC also ships with support for the Yew Router, adding Bulma-styled components which wrap the Yew Router components for clean integration.
As a guiding principal, YBC does not attempt to encapsulate every single Bulma style as a Rust type, let alone the many valid style combinations. That would be far too complex, and probably limiting to the user in many ways. Instead, YBC handles structure, required classes, functionality, sane defaults and every component can be customized with any additional classes for an exact look and feel.
What does it look like to use YBC? The following is a snippet of a component’s view method
rendering a navbar, a fluid container, and some tiles.
Please see this project’s README for the example. Docs.rs is currently (2021.07.26) slightly broken and having trouble including external docs as it has historically.
Structs
A Yew Router anchor button element with Bulma styling.
A Yew Router button element with Bulma styling.
An interactive dropdown menu for discoverable content.
A classic modal overlay, in which you can include any content you want.
A classic modal with a header, body, and footer section.
A request to close a modal instance by ID.
An agent used for being able to close
Modal & ModalCard instances by ID.A responsive horizontal navbar that can support images, links, buttons, and dropdowns.
A navbar dropdown menu, which can include navbar items and dividers.
A Yew Router anchor button for use in a
Pagination component.Enums
The two alignment options available for field addons.
Common alignment classes.
The 4 additional separators for a breadcrump.
The 3 sizes available for a breadcrumb.
The 3 sizes available for a button group.
Dropdown actions.
The two alignment options available for grouped field controls.
The six sizes available for titles & subtitles.
The 4 sizes available for heroes.
Available placeholder sizes for figures.
The 4 allowed types for an input component.
The three sizes available for horizontal field labels.
Modal actions.
The 2 possible fixed positions available for a navbar.
The two HTML tags allowed for a navbar-item.
The message type used by the
Navbar component.A pagination item type.
The 2 sizes available for sections, which controls spacing.
Common size classes.
Tile context modifiers.
Tile size modifiers.
Type Definitions
Bulma’s most basic spacer block
A white box to contain other elements.
A simple breadcrumb component to improve your navigation experience.
A button element.
An anchor element styled as a button.
An input element with
type="reset" styled as a button.An input element with
type="submit" styled as a button.A container for a group of buttons.
An all-around flexible and composable component; this is the card container.
A container for any other content as the body of the card.
A container for card footer content; rendered as a horizontal list of controls.
A container for card header content; rendered as a horizontal bar with a shadow.
A fullwidth container for a responsive image.
The 2-state checkbox in its native format.
A flexbox-based responsive column.
The container for a set of responsive columns.
A simple container to center your content horizontally.
A single component to wrap WYSIWYG generated content, where only HTML tags are available.
A container with which you can wrap the form controls.
A versatile delete cross.
A container for form controls
A custom file upload input.
A simple responsive footer which can include anything.
An imposing hero banner to showcase something.
A container for any type of icon font.
A container for responsive images.
A text input element.
A multi-purpose horizontal level, which can contain almost any other element.
An individual element of a level container.
A container for level elements to be grouped to the left of the container.
A container for level elements to be grouped to the right of the container.
A UI element for repeatable and nestable content.
Elements to be grouped as the center body of the media container.
Elements to be grouped to the left of the media container.
Elements to be grouped to the right of the media container.
A simple menu, for any type of vertical navigation.
A label for a section of the menu.
A container for menu list
li elements.Colored message blocks, to emphasize part of your page.
A container for the body of a message.
An optional message header that can hold a title and a delete element.
A wrapper around an HTML
select tag with the multiple=true attribute.An element to display a horizontal rule in a navbar-dropdown.
A single element of the navbar.
Bold notification blocks, to alert your users of something.
A responsive, usable, and flexible pagination component.
A horizontal ellipsis for pagination range separators.
A pagination element representing a link to a page number, the previous page or the next page.
A composable panel, for compact controls.
An individual element of the panel.
A container for the navigation tabs of a panel.
A native HTML progress bar.
The mutually exclusive radio buttons in their native format.
A simple container to divide your page into sections.
A wrapper around an HTML
select tag.A simple heading to add depth to your page.
An HTML table component.
Simple responsive horizontal navigation tabs, with different styles.
A small tag label to insert anywhere.
A container for a list of tags.
A multiline textarea component.
A single tile element to build 2-dimensional whatever-you-like grids.
A simple heading to add depth to your page.