ybc
v0.4.0
YBC merangkum semua struktur, gaya, dan fungsionalitas kerangka Bulma CSS sebagai sekumpulan komponen Yew. YBC juga dilengkapi dengan dukungan untuk Yew Router, menambahkan komponen bergaya Bulma yang membungkus komponen Yew Router untuk integrasi yang bersih.
Sebagai prinsip panduan, YBC tidak berupaya merangkum setiap gaya Bulma sebagai tipe Rust, apalagi banyak kombinasi gaya yang valid. Itu akan terlalu rumit, dan mungkin membatasi pengguna dalam banyak hal. Sebaliknya, YBC menangani struktur, kelas yang diperlukan, fungsionalitas, default yang wajar, dan setiap komponen dapat disesuaikan dengan kelas tambahan apa pun untuk tampilan dan nuansa yang tepat.
Bagaimana rasanya menggunakan YBC? Berikut ini cuplikan metode view komponen yang merender navbar, container fluid, dan beberapa ubin.
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 >
</>
}
}
} Pertama, tambahkan perpustakaan ini ke dependensi Cargo.toml Anda.
[ dependencies ]
ybc = " * " Proyek ini bekerja dengan baik jika Anda hanya menyertakan Bulma CSS di HTML Anda, seperti yang dijelaskan di sini. Tautan berikut di kepala HTML Anda akan membantu: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .
Namun, jika Anda ingin menyesuaikan Bulma agar sesuai dengan pedoman gaya Anda, Anda harus memiliki salinan Bulma SASS secara lokal, lalu mengimpor Bulma setelah Anda menentukan penyesuaian, seperti yang dijelaskan di sini.
// 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 " ; Jika Anda menggunakan Trunk untuk membangun aplikasi dan menggabungkan aset-asetnya, cukup arahkan ke index.scss dari file index.html Anda, dan Trunk akan menangani kompilasi aplikasi Anda, sass Anda, dan akan membuat semuanya tersedia di direktori dist Anda.
<!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 > Sekarang jalankan saja trunk serve --open , dan aplikasi Anda akan dibuat dan dibuka di browser Anda.
Jika Anda tidak menggunakan Trunk, Anda perlu menggunakan mekanisme lain untuk membangun aplikasi Rust WASM dan asetnya.
Saat ini, perpustakaan ini hanya mendukung backend sistem web. Dukungan untuk stdweb saat ini tidak direncanakan. Jika itu bermasalah, silakan buka masalah yang menjelaskan alasannya. Bersulang!
