[−][src]Crate ybc
ybc
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 |
ButtonInputResetProps | |
ButtonInputSubmit | An input element with |
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 |
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 |
ModalProps | |
MultiSelect | A wrapper around an HTML |
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 |
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 |
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 |
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. |