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 >