ybc下载 - ybc源码下载

ybc

其他源码

v0.4.0

下载

ybc

构建状态

基于 Bulma CSS 框架的 Yew 组件库。

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 css（无自定义）

如果您只是将 Bulma CSS 包含在 HTML 中（如此处所述），则该项目可以完美运行。 HTML 头中的以下链接应该可以解决问题： <link rel="stylesheet" href="https://cdn.jsdelivr.net/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.html文件中指向您的index.scss ，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 >