ybc
v0.4.0
YBC kapselt die gesamte Struktur, den Stil und die Funktionalität des Bulma-CSS-Frameworks als eine Reihe von Yew-Komponenten. YBC bietet außerdem Unterstützung für den Yew Router und fügt Komponenten im Bulma-Stil hinzu, die die Yew Router-Komponenten für eine saubere Integration umschließen.
Als Leitprinzip versucht YBC nicht, jeden einzelnen Bulma-Stil als Rust-Typ zu kapseln, geschweige denn die vielen gültigen Stilkombinationen. Das wäre viel zu komplex und würde den Benutzer wahrscheinlich in vielerlei Hinsicht einschränken. Stattdessen kümmert sich YBC um Struktur, erforderliche Klassen, Funktionalität und sinnvolle Standardeinstellungen, und jede Komponente kann mit beliebigen zusätzlichen Klassen für ein exaktes Erscheinungsbild angepasst werden.
Wie sieht es mit der Nutzung von YBC aus? Das Folgende ist ein Ausschnitt der view einer Komponente, die eine Navigationsleiste, einen Flüssigkeitscontainer und einige Kacheln rendert.
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 >
</>
}
}
} Fügen Sie diese Bibliothek zunächst Ihren Cargo.toml Abhängigkeiten hinzu.
[ dependencies ]
ybc = " * " Dieses Projekt funktioniert perfekt, wenn Sie einfach das Bulma-CSS in Ihren HTML-Code einbinden, wie hier beschrieben. Der folgende Link in Ihrem HTML-Kopf sollte den Zweck erfüllen: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .
Wenn Sie Bulma jedoch an Ihre Stilrichtlinien anpassen möchten, müssen Sie lokal über eine Kopie von Bulma SASS verfügen und Bulma dann importieren, nachdem Sie Ihre Anpassungen definiert haben, wie hier beschrieben.
// 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 " ; Wenn Sie Trunk verwenden, um Ihre Anwendung zu erstellen und ihre Assets zu bündeln, verweisen Sie einfach auf Ihre index.scss in Ihrer index.html Datei, und Trunk kümmert sich um die Kompilierung Ihrer Anwendung, Ihres Sass, und stellt alles in Ihrem dist Verzeichnis zur Verfügung.
<!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 > Führen Sie nun einfach trunk serve --open aus und Ihre Anwendung wird erstellt und in Ihrem Browser geöffnet.
Wenn Sie Trunk nicht verwenden, müssen Sie einen anderen Mechanismus zum Erstellen Ihrer Rust WASM-Anwendung und ihrer Assets verwenden.
Derzeit unterstützt diese Bibliothek nur das Web-Sys-Backend. Eine Unterstützung für stdweb ist derzeit nicht geplant. Wenn dies problematisch ist, öffnen Sie bitte ein Problem und beschreiben Sie, warum. Prost!
