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§
- Block
- Bulma’s most basic spacer block
- Block
Props - Box
- A white box to contain other elements.
- BoxProps
- Breadcrumb
- A simple breadcrumb component to improve your navigation experience.
- Breadcrumb
Props - Button
- A button element.
- Button
Anchor - An anchor element styled as a button.
- Button
Anchor Props - Button
Anchor Router - A Yew Router anchor button element with Bulma styling.
- Button
Input Reset - An input element with
type="reset"styled as a button. - Button
Input Reset Props - Button
Input Submit - An input element with
type="submit"styled as a button. - Button
Input Submit Props - Button
Props - Button
Router - A Yew Router button element with Bulma styling.
- Button
Router Props - Buttons
- A container for a group of buttons.
- Buttons
Props - Card
- An all-around flexible and composable component; this is the card container.
- Card
Content - A container for any other content as the body of the card.
- Card
Content Props - Card
Footer - A container for card footer content; rendered as a horizontal list of controls.
- Card
Footer Props - Card
Header - A container for card header content; rendered as a horizontal bar with a shadow.
- Card
Header Props - Card
Image - A fullwidth container for a responsive image.
- Card
Image Props - Card
Props - Checkbox
- The 2-state checkbox in its native format.
- Checkbox
Props - Column
- A flexbox-based responsive column.
- Column
Props - Columns
- The container for a set of responsive columns.
- Columns
Props - Container
- A simple container to center your content horizontally.
- Container
Props - Content
- A single component to wrap WYSIWYG generated content, where only HTML tags are available.
- Content
Props - Control
- A container with which you can wrap the form controls.
- Control
Props - Delete
- A versatile delete cross.
- Delete
Props - Dropdown
- An interactive dropdown menu for discoverable content.
- Dropdown
Props - Field
- A container for form controls
- Field
Props - File
- A custom file upload input.
- File
Props - Footer
- A simple responsive footer which can include anything.
- Footer
Props - Hero
- An imposing hero banner to showcase something.
- Hero
Props - Icon
- A container for any type of icon font.
- Icon
Props - Image
- A container for responsive images.
- Image
Props - Input
- A text input element.
- Input
Props - Level
- A multi-purpose horizontal level, which can contain almost any other element.
- Level
Item - An individual element of a level container.
- Level
Item Props - Level
Left - A container for level elements to be grouped to the left of the container.
- Level
Left Props - Level
Props - Level
Right - A container for level elements to be grouped to the right of the container.
- Level
Right Props - Media
- A UI element for repeatable and nestable content.
- Media
Content - Elements to be grouped as the center body of the media container.
- Media
Content Props - Media
Left - Elements to be grouped to the left of the media container.
- Media
Left Props - Media
Props - Media
Right - Elements to be grouped to the right of the media container.
- Media
Right Props - Menu
- A simple menu, for any type of vertical navigation.
- Menu
Label - A label for a section of the menu.
- Menu
Label Props - Menu
List - A container for menu list
lielements. - Menu
List Props - Menu
Props - Message
- Colored message blocks, to emphasize part of your page.
- Message
Body - A container for the body of a message.
- Message
Body Props - Message
Header - An optional message header that can hold a title and a delete element.
- Message
Header Props - Message
Props - Modal
- A classic modal overlay, in which you can include any content you want.
- Modal
Card - A classic modal with a header, body, and footer section.
- Modal
Card Props - Modal
Close Msg - A request to close a modal instance by ID.
- Modal
Closer - An agent used for being able to close
Modal&ModalCardinstances by ID. - Modal
Props - Multi
Select - A wrapper around an HTML
selecttag with themultiple=trueattribute. - Multi
Select Props - Navbar
- A responsive horizontal navbar that can support images, links, buttons, and dropdowns.
- Navbar
Divider - An element to display a horizontal rule in a navbar-dropdown.
- Navbar
Divider Props - Navbar
Dropdown - A navbar dropdown menu, which can include navbar items and dividers.
- Navbar
Dropdown Props - Navbar
Item - A single element of the navbar.
- Navbar
Item Props - Navbar
Props - Notification
- Bold notification blocks, to alert your users of something.
- Notification
Props - Pagination
- A responsive, usable, and flexible pagination component.
- Pagination
Ellipsis - A horizontal ellipsis for pagination range separators.
- Pagination
Item - A pagination element representing a link to a page number, the previous page or the next page.
- Pagination
Item Props - Pagination
Item Router - A Yew Router anchor button for use in a
Paginationcomponent. - Pagination
Props - Panel
- A composable panel, for compact controls.
- Panel
Block - An individual element of the panel.
- Panel
Block Props - Panel
Props - Panel
Tabs - A container for the navigation tabs of a panel.
- Panel
Tabs Props - Progress
- A native HTML progress bar.
- Progress
Props - Radio
- The mutually exclusive radio buttons in their native format.
- Radio
Props - Section
- A simple container to divide your page into sections.
- Section
Props - Select
- A wrapper around an HTML
selecttag. - Select
Props - Subtitle
- A simple heading to add depth to your page.
- Subtitle
Props - Table
- An HTML table component.
- Table
Props - Tabs
- Simple responsive horizontal navigation tabs, with different styles.
- Tabs
Props - Tag
- A small tag label to insert anywhere.
- TagProps
- Tags
- A container for a list of tags.
- Tags
Props - Text
Area - A multiline textarea component.
- Text
Area Props - Tile
- A single tile element to build 2-dimensional whatever-you-like grids.
- Tile
Props - Title
- A simple heading to add depth to your page.
- Title
Props
Enums§
- Addons
Align - The two alignment options available for field addons.
- Alignment
- Common alignment classes.
- Breadcrumb
Separator - The 4 additional separators for a breadcrump.
- Breadcrumb
Size - The 3 sizes available for a breadcrumb.
- Button
Group Size - The 3 sizes available for a button group.
- Dropdown
Msg - Dropdown actions.
- Grouped
Align - The two alignment options available for grouped field controls.
- Header
Size - The six sizes available for titles & subtitles.
- Hero
Size - The 4 sizes available for heroes.
- Image
Size - Available placeholder sizes for figures.
- Input
Type - The 4 allowed types for an input component.
- Label
Size - The three sizes available for horizontal field labels.
- Modal
Msg - Modal actions.
- Navbar
Fixed - The 2 possible fixed positions available for a navbar.
- Navbar
Item Tag - The two HTML tags allowed for a navbar-item.
- Navbar
Msg - The message type used by the
Navbarcomponent. - Pagination
Item Type - A pagination item type.
- Section
Size - The 2 sizes available for sections, which controls spacing.
- Size
- Common size classes.
- TileCtx
- Tile context modifiers.
- Tile
Size - Tile size modifiers.