13 个不稳定版本 (4 个破坏性更新)
| 0.4.0 | 2023年4月20日 |
|---|---|
| 0.4.0-beta.0 | 2023年2月15日 |
| 0.3.0-beta.0 | 2022年12月1日 |
| 0.2.1 | 2021年7月26日 |
| 0.0.0 | 2020年9月9日 |
#1294 in WebAssembly
每月96次下载
120KB
2.5K SLoC
ybc
YBC 将 Bulma CSS 框架的结构、样式和功能封装成一组 Yew 组件。YBC 还提供了对 Yew Router 的支持，添加了 Bulma 样式的组件，以实现与 Yew Router 组件的干净集成。
作为一个指导原则，YBC 不会试图将每一个 Bulma 样式封装成 Rust 类型，更不用说众多的有效样式组合。这将过于复杂，可能还会在许多方面限制用户。相反，YBC 处理结构、所需类、功能、合理的默认值，并且每个组件都可以使用任何额外的类来定制外观和感觉。
使用 YBC 是什么样的体验？以下是一个组件的 view 方法渲染导航栏、流体容器和一些瓦片的代码片段。
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=classes!("box")>
<p>{"Lorem ipsum dolor sit amet ..."}</p>
</ybc::Tile>
/* .. snip .. more tiles here .. */
</ybc::Tile>
</ybc::Tile>
</ybc::Container>
</>
}
}
}
入门指南
添加 ybc 依赖项
首先，将此库添加到您的 Cargo.toml 依赖项中。
[dependencies]
ybc = "*"
添加 bulma
添加 bulma css (无自定义)
如果只是将 Bulma CSS 包含在您的 HTML 中，该项目将完美运行，如这里所述。以下是在您的 HTML head 中的链接应该可以解决问题： <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/css/bulma.min.css"/>。
添加 bulma sass (允许自定义和主题)
然而，如果您想根据您的风格指南自定义 Bulma，那么您需要本地拥有 Bulma SASS 的副本，然后定义自定义设置后导入 Bulma，如这里所述。
// 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";
如果您使用 Trunk 构建应用程序并捆绑其资源，只需从您的 index.scss 文件中指向您的 index.html 文件，Trunk 将处理编译您的应用程序和 SASS，并将所有内容放入您的 dist 目录。
<!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>
现在只需执行 trunk serve --open，您的应用程序将在浏览器中构建并打开。
如果您没有使用 Trunk，您将需要使用其他机制来构建您的 Rust WASM 应用程序及其资源。
web-sys & stdweb
目前，此库仅支持 web-sys 后端。目前没有计划支持 stdweb。如果有问题，请打开一个描述原因的问题。干杯！
依赖项
约 11-15MB
约 267K SLoC