ybcダウンロード - ybcソースコードのダウンロード

ybc

その他のソースコード

v0.4.0

ダウンロード

ybc

ビルドステータス

Bulma CSS フレームワークに基づく Yew コンポーネントライブラリ。

YBC は、Bulma CSS フレームワークのすべての構造、スタイル、機能を Yew コンポーネントのセットとしてカプセル化します。 YBC には Yew Router のサポートも同梱されており、Yew Router コンポーネントをラップしてクリーンな統合を実現する Bulma スタイルのコンポーネントが追加されています。

指針として、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を追加（カスタマイズなし）

このプロジェクトは、ここで説明されているように、HTML に Bulma CSS を含めるだけで完全に機能します。 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 >