ybc
v0.4.0
YBC encapsule toute la structure, le style et les fonctionnalités du framework CSS Bulma sous la forme d'un ensemble de composants Yew. YBC est également livré avec la prise en charge du Yew Router, en ajoutant des composants de style Bulma qui enveloppent les composants du Yew Router pour une intégration propre.
En tant que principe directeur, YBC ne tente pas d'encapsuler chaque style Bulma comme un type Rust, encore moins les nombreuses combinaisons de styles valides. Ce serait beaucoup trop complexe et limiterait probablement l'utilisateur à bien des égards. Au lieu de cela, YBC gère la structure, les classes requises, les fonctionnalités, les valeurs par défaut saines et chaque composant peut être personnalisé avec des classes supplémentaires pour une apparence exacte.
À quoi ressemble l’utilisation de YBC ? Ce qui suit est un extrait de la méthode view d'un composant rendant une barre de navigation, un conteneur de fluide et quelques vignettes.
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 >
</>
}
}
} Tout d’abord, ajoutez cette bibliothèque à vos dépendances Cargo.toml .
[ dependencies ]
ybc = " * " Ce projet fonctionne parfaitement si vous incluez simplement le CSS Bulma dans votre HTML, comme décrit ici. Le lien suivant dans votre en-tête HTML devrait faire l'affaire : <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .
Cependant, si vous souhaitez personnaliser Bulma pour qu'il corresponde à vos directives de style, vous devrez alors disposer d'une copie du Bulma SASS localement, puis importer Bulma après avoir défini vos personnalisations, comme décrit ici.
// 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 " ; Si vous utilisez Trunk pour créer votre application et regrouper ses actifs, pointez simplement sur votre index.scss à partir de votre fichier index.html , et Trunk se chargera de compléter votre application, votre sass, et rendra tout disponible dans votre répertoire 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 > Maintenant, exécutez simplement trunk serve --open , et votre application sera créée et ouverte dans votre navigateur.
Si vous n'utilisez pas Trunk, vous devrez utiliser un autre mécanisme pour créer votre application Rust WASM et ses actifs.
Actuellement, cette bibliothèque ne prend en charge que le backend web-sys. La prise en charge de stdweb n'est pas prévue pour le moment. Si cela pose problème, veuillez ouvrir un numéro décrivant pourquoi. Acclamations!
