ybc
v0.4.0
YBC encapsula toda la estructura, estilo y funcionalidad del marco CSS Bulma como un conjunto de componentes Yew. YBC también incluye soporte para Yew Router, agregando componentes estilo Bulma que envuelven los componentes de Yew Router para una integración limpia.
Como principio rector, YBC no intenta encapsular cada estilo de Bulma como un tipo Rust, y mucho menos las muchas combinaciones de estilos válidas. Eso sería demasiado complejo y probablemente limitaría al usuario en muchos sentidos. En cambio, YBC maneja la estructura, las clases requeridas, la funcionalidad, los valores predeterminados sensatos y cada componente se puede personalizar con clases adicionales para una apariencia exacta.
¿Cómo se ve usar YBC? El siguiente es un fragmento del método de view de un componente que representa una barra de navegación, un contenedor de fluido y algunos mosaicos.
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 >
</>
}
}
} Primero, agregue esta biblioteca a sus dependencias Cargo.toml .
[ dependencies ]
ybc = " * " Este proyecto funciona perfectamente si solo incluye el CSS de Bulma en su HTML, como se describe aquí. El siguiente enlace en su encabezado HTML debería funcionar: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .
Sin embargo, si desea personalizar Bulma para que coincida con sus pautas de estilo, necesitará tener una copia de Bulma SASS localmente y luego importar Bulma después de haber definido sus personalizaciones, como se describe aquí.
// 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 está utilizando Trunk para crear su aplicación y agrupar sus activos, simplemente apunte a su index.scss desde su archivo index.html , y Trunk se encargará de completar su aplicación, su sass, y hará que todo esté disponible en su directorio 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 > Ahora simplemente ejecute trunk serve --open y su aplicación se creará y se abrirá en su navegador.
Si no está utilizando Trunk, necesitará utilizar otro mecanismo para crear su aplicación Rust WASM y sus activos.
Actualmente, esta biblioteca solo admite el backend web-sys. Actualmente no está previsto el soporte para stdweb. Si eso es problemático, abra un problema que describa el motivo. ¡Salud!
