หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

วายบีซี

สถานะการสร้าง

ไลบรารีคอมโพเนนต์ 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 = " * "

เพิ่มบูลมา

เพิ่ม bulma css (ไม่มีการปรับแต่ง)

โปรเจ็กต์นี้ทำงานได้ดีอย่างสมบูรณ์แบบหากคุณรวม Bulma CSS ไว้ใน HTML ของคุณตามที่อธิบายไว้ที่นี่ ลิงก์ต่อไปนี้ในส่วนหัว HTML ของคุณควรได้ผล: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> .

เพิ่ม bulma sass (อนุญาตให้ปรับแต่ง & ธีม)

อย่างไรก็ตาม หากคุณต้องการปรับแต่ง 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 >

ตอนนี้เพียงดำเนินการ trunk serve --open และแอปพลิเคชันของคุณจะถูกสร้างขึ้นและเปิดในเบราว์เซอร์ของคุณ

หากคุณไม่ได้ใช้ Trunk คุณจะต้องใช้กลไกอื่นในการสร้างแอปพลิเคชัน Rust WASM และเนื้อหาของแอปพลิเคชัน

เว็บซิส & stdweb

ปัจจุบันไลบรารีนี้รองรับเฉพาะแบ็กเอนด์ของ web-sys เท่านั้น ยังไม่มีการวางแผนรองรับ stdweb ในขณะนี้ หากนั่นเป็นปัญหา โปรดเปิดประเด็นที่อธิบายสาเหตุ ไชโย!

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด