[][src]Crate ybc

ybc

Build Status Crates.io docs.rs License Crates.io

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 strucutre, 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.

use ybc::NavbarFixed::Top;
use ybc::TileCtx::{Ancestor, Child, Parent};
use ybc::TileSize::Four;
use yew::prelude::*;

struct App; // An application component.

impl Component for App {
  /* .. snip .. */
  fn view(&self) -> Html {
    html!{
      <>
      <ybc::Navbar fixed=Top /* .. your navbar content here .. *//>
      <ybc::Container fluid=true>
        <ybc::Tile ctx=Ancestor>
          <ybc::Tile ctx=Parent vertical=true size=Four>
            <ybc::Tile ctx=Child classes="box">
              <p>{"Lorem ipsum dolor sit amet ..."}</p>
            </ybc::Tile>
            /* .. snip .. more tiles here .. */
          </ybc::Tile>
        </ybc::Tile>
      </ybc::Container>
      </>
    }
  }
}

getting started

add ybc dependency

First, add this library to your Cargo.toml dependencies.

[dependencies]
ybc = "*"

add bulma

add bulma css (no customizations)

This project works perfectly well if you just include the Bulma CSS in your HTML, as described here. The following link in your HTML head should do the trick: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"/>.

add bulma sass (allows customization & themes)

However, if you want to customize Bulma to match your style guidelines, then you will need to have a copy of the Bulma SASS locally, and then import Bulma after you've defined your customizations, as described here.

// index.scss

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Import the rest of Bulma
@import "path/to/bulma";

If you are using Trunk to build your application and bundle its assets, then simply point to your index.scss from your index.html file, and Trunk will handle compling your application, your sass, and will make everything available in your dist dir.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="index.sass"/>
  </head>
  <body>
    <!-- ... snip ... -->
  </body>
</html>

Now just execute trunk serve --open, and your application will be built and opened in your browser.

If you are not using Trunk, you will need to use another mechanism for building your Rust WASM application and its assets.

web-sys & stdweb

Currently, this library only supports the web-sys backend. Support for stdweb is not currently planned. If that is problematic, please open an issue describing why. Cheers!

Structs

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

FieldHorizontal

A field wrapper to create horizontal fields.

FieldHorizontalProps
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 3 sizes available for heros.

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.