ybc
v0.4.0
YBC encapsula toda a estrutura, estilo e funcionalidade da estrutura Bulma CSS como um conjunto de componentes Yew. O YBC também vem com suporte para o Yew Router, adicionando componentes no estilo Bulma que envolvem os componentes do Yew Router para uma integração limpa.
Como princípio orientador, YBC não tenta encapsular cada estilo Bulma como um tipo Rust, muito menos as muitas combinações de estilos válidas. Isso seria muito complexo e provavelmente limitaria o usuário de várias maneiras. Em vez disso, YBC lida com estrutura, classes necessárias, funcionalidade, padrões sensatos e cada componente pode ser personalizado com quaisquer classes adicionais para uma aparência exata.
Como é usar o YBC? A seguir está um trecho do método view de um componente que renderiza uma barra de navegação, um contêiner de fluido e alguns blocos.
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 >
</>
}
}
} Primeiro, adicione esta biblioteca às suas dependências Cargo.toml .
[ dependencies ]
ybc = " * " Este projeto funciona perfeitamente se você apenas incluir o Bulma CSS em seu HTML, conforme descrito aqui. O seguinte link em seu cabeçalho HTML deve resolver o problema: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .
No entanto, se quiser personalizar o Bulma para corresponder às suas diretrizes de estilo, você precisará ter uma cópia do Bulma SASS localmente e importar o Bulma depois de definir suas personalizações, conforme descrito aqui.
// 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 " ; Se você estiver usando o Trunk para construir seu aplicativo e agrupar seus ativos, basta apontar para o seu index.scss no arquivo index.html e o Trunk cuidará da compilação do seu aplicativo, do seu atrevimento, e disponibilizará tudo em seu diretório 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 > Agora basta executar trunk serve --open e seu aplicativo será compilado e aberto em seu navegador.
Se não estiver usando o Trunk, você precisará usar outro mecanismo para construir seu aplicativo Rust WASM e seus ativos.
Atualmente, esta biblioteca oferece suporte apenas ao backend web-sys. O suporte para stdweb não está planejado no momento. Se isso for problemático, abra um problema descrevendo o porquê. Saúde!
