تحميل ybc - تنزيل كود المصدر ybc

ybc

شفرة المصدر الأخرى

v0.4.0

تنزيل

ybc

حالة البناء

مكتبة مكونات Yew تعتمد على إطار عمل Bulma CSS.

تقوم YBC بتغليف كل بنية وأسلوب ووظائف إطار عمل Bulma CSS كمجموعة من مكونات Yew. يأتي YBC أيضًا مع دعم لجهاز Yew Router، مضيفًا مكونات على طراز Bulma والتي تغطي مكونات Yew Router من أجل التكامل النظيف.

كمبدأ توجيهي، لا تحاول YBC تغليف كل نمط من أنماط Bulma كنوع Rust، ناهيك عن مجموعات الأنماط العديدة الصالحة. سيكون ذلك معقدًا جدًا، وربما يقتصر على المستخدم بعدة طرق. بدلاً من ذلك، تتعامل YBC مع البنية والفئات المطلوبة والوظائف والإعدادات الافتراضية المعقولة ويمكن تخصيص كل مكون باستخدام أي فئات إضافية للحصول على الشكل والمظهر الدقيقين.

كيف يبدو استخدام YBC؟ ما يلي هو مقتطف من طريقة view المكون الذي يعرض شريط التنقل، وحاوية السوائل، وبعض المربعات.

 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 >
      </>
    }
  }
}

ابدء

إضافة تبعية ybc

أولاً، قم بإضافة هذه المكتبة إلى تبعيات Cargo.toml الخاصة بك.

[ dependencies ]
ybc = " * "

أضف بولما

إضافة بولما CSS (بدون تخصيصات)

يعمل هذا المشروع بشكل جيد إذا قمت فقط بتضمين Bulma CSS في HTML الخاص بك، كما هو موضح هنا. من المفترض أن يقوم الرابط التالي الموجود في رأس HTML الخاص بك بالمهمة: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .

إضافة بولما ساس (يسمح بالتخصيص والموضوعات)

ومع ذلك، إذا كنت تريد تخصيص Bulma ليتوافق مع إرشادات أسلوبك، فستحتاج إلى الحصول على نسخة من Bulma SASS محليًا، ثم استيراد Bulma بعد تحديد تخصيصاتك، كما هو موضح هنا.

 // 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 " ;

إذا كنت تستخدم Trunk لإنشاء تطبيقك وتجميع أصوله، فما عليك سوى الإشارة إلى index.scss من ملف index.html الخاص بك، وسيتولى Trunk عملية تجميع تطبيقك وساسك، وسيجعل كل شيء متاحًا في dist dir.

 <!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 >