Crate ybc

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
• BlockProps
• Box
  A white box to contain other elements.
• BoxProps
• Breadcrumb
  A simple breadcrumb component to improve your navigation experience.
• BreadcrumbProps
• Button
  A button element.
• ButtonAnchor
  An anchor element styled as a button.
• ButtonAnchorProps
• ButtonAnchorRouter
  A Yew Router anchor button element with Bulma styling.
• ButtonInputReset
  An input element with type="reset" styled as a button.
• ButtonInputResetProps
• ButtonInputSubmit
  An input element with type="submit" styled as a button.
• ButtonInputSubmitProps
• ButtonProps
• ButtonRouter
  A Yew Router button element with Bulma styling.
• ButtonRouterProps
• Buttons
  A container for a group of buttons.
• ButtonsProps
• Card
  An all-around flexible and composable component; this is the card container.
• CardContent
  A container for any other content as the body of the card.
• CardContentProps
• CardFooter
  A container for card footer content; rendered as a horizontal list of controls.
• CardFooterProps
• CardHeader
  A container for card header content; rendered as a horizontal bar with a shadow.
• CardHeaderProps
• CardImage
  A fullwidth container for a responsive image.
• CardImageProps
• CardProps
• Checkbox
  The 2-state checkbox in its native format.
• CheckboxProps
• Column
  A flexbox-based responsive column.
• ColumnProps
• Columns
  The container for a set of responsive columns.
• ColumnsProps
• Container
  A simple container to center your content horizontally.
• ContainerProps
• Content
  A single component to wrap WYSIWYG generated content, where only HTML tags are available.
• ContentProps
• Control
  A container with which you can wrap the form controls.
• ControlProps
• Delete
  A versatile delete cross.
• DeleteProps
• Dropdown
  An interactive dropdown menu for discoverable content.
• DropdownProps
• Field
  A container for form controls
• FieldProps
• File
  A custom file upload input.
• FileProps
• Footer
  A simple responsive footer which can include anything.
• FooterProps
• Hero
  An imposing hero banner to showcase something.
• HeroProps
• Icon
  A container for any type of icon font.
• IconProps
• Image
  A container for responsive images.
• ImageProps
• Input
  A text input element.
• InputProps
• Level
  A multi-purpose horizontal level, which can contain almost any other element.
• LevelItem
  An individual element of a level container.
• LevelItemProps
• LevelLeft
  A container for level elements to be grouped to the left of the container.
• LevelLeftProps
• LevelProps
• LevelRight
  A container for level elements to be grouped to the right of the container.
• LevelRightProps
• Media
  A UI element for repeatable and nestable content.
• MediaContent
  Elements to be grouped as the center body of the media container.
• MediaContentProps
• MediaLeft
  Elements to be grouped to the left of the media container.
• MediaLeftProps
• MediaProps
• MediaRight
  Elements to be grouped to the right of the media container.
• MediaRightProps
• Menu
  A simple menu, for any type of vertical navigation.
• MenuLabel
  A label for a section of the menu.
• MenuLabelProps
• MenuList
  A container for menu list li elements.
• MenuListProps
• MenuProps
• Message
  Colored message blocks, to emphasize part of your page.
• MessageBody
  A container for the body of a message.
• MessageBodyProps
• MessageHeader
  An optional message header that can hold a title and a delete element.
• MessageHeaderProps
• MessageProps
• Modal
  A classic modal overlay, in which you can include any content you want.
• ModalCard
  A classic modal with a header, body, and footer section.
• ModalCardProps
• ModalCloseMsg
  A request to close a modal instance by ID.
• ModalCloser
  An agent used for being able to close Modal & ModalCard instances by ID.
• ModalProps
• MultiSelect
  A wrapper around an HTML select tag with the multiple=true attribute.
• MultiSelectProps
• Navbar
  A responsive horizontal navbar that can support images, links, buttons, and dropdowns.
• NavbarDivider
  An element to display a horizontal rule in a navbar-dropdown.
• NavbarDividerProps
• NavbarDropdown
  A navbar dropdown menu, which can include navbar items and dividers.
• NavbarDropdownProps
• NavbarItem
  A single element of the navbar.
• NavbarItemProps
• NavbarProps
• Notification
  Bold notification blocks, to alert your users of something.
• NotificationProps
• Pagination
  A responsive, usable, and flexible pagination component.
• PaginationEllipsis
  A horizontal ellipsis for pagination range separators.
• PaginationItem
  A pagination element representing a link to a page number, the previous page or the next page.
• PaginationItemProps
• PaginationItemRouter
  A Yew Router anchor button for use in a Pagination component.
• PaginationProps
• Panel
  A composable panel, for compact controls.
• PanelBlock
  An individual element of the panel.
• PanelBlockProps
• PanelProps
• PanelTabs
  A container for the navigation tabs of a panel.
• PanelTabsProps
• Progress
  A native HTML progress bar.
• ProgressProps
• Radio
  The mutually exclusive radio buttons in their native format.
• RadioProps
• Section
  A simple container to divide your page into sections.
• SectionProps
• Select
  A wrapper around an HTML select tag.
• SelectProps
• Subtitle
  A simple heading to add depth to your page.
• SubtitleProps
• Table
  An HTML table component.
• TableProps
• Tabs
  Simple responsive horizontal navigation tabs, with different styles.
• TabsProps
• Tag
  A small tag label to insert anywhere.
• TagProps
• Tags
  A container for a list of tags.
• TagsProps
• TextArea
  A multiline textarea component.
• TextAreaProps
• Tile
  A single tile element to build 2-dimensional whatever-you-like grids.
• TileProps
• Title
  A simple heading to add depth to your page.
• TitleProps

Enums

• AddonsAlign
  The two alignment options available for field addons.
• Alignment
  Common alignment classes.
• BreadcrumbSeparator
  The 4 additional separators for a breadcrump.
• BreadcrumbSize
  The 3 sizes available for a breadcrumb.
• ButtonGroupSize
  The 3 sizes available for a button group.
• DropdownMsg
  Dropdown actions.
• GroupedAlign
  The two alignment options available for grouped field controls.
• HeaderSize
  The six sizes available for titles & subtitles.
• HeroSize
  The 4 sizes available for heroes.
• ImageSize
  Available placeholder sizes for figures.
• InputType
  The 4 allowed types for an input component.
• LabelSize
  The three sizes available for horizontal field labels.
• ModalMsg
  Modal actions.
• NavbarFixed
  The 2 possible fixed positions available for a navbar.
• NavbarItemTag
  The two HTML tags allowed for a navbar-item.
• NavbarMsg
  The message type used by the Navbar component.
• PaginationItemType
  A pagination item type.
• SectionSize
  The 2 sizes available for sections, which controls spacing.
• Size
  Common size classes.
• TileCtx
  Tile context modifiers.
• TileSize
  Tile size modifiers.