solid blocks

ล็อคทึบ

UI Building Blocks สำหรับ solidjs

แนวคิดหลัก

ส่วนประกอบที่มีค่าแทนที่จะเป็นส่วนประกอบโดยไม่ต้องเพิ่มมูลค่า

องค์ประกอบการห่อเช่นส่วนหัวข้อความหรือรูปภาพในส่วนประกอบที่กำหนดเองนั้นสิ้นเปลือง ส่วนประกอบจะได้รับเฉพาะในกรณีที่พวกเขามีมูลค่าเพิ่มมากกว่าองค์ประกอบดั้งเดิมของพวกเขา ค่าเพิ่มอาจเป็น

• ประสบการณ์ผู้ใช้
• การเข้าถึงได้
• ประสบการณ์นักพัฒนา
• ผลงาน

หากไม่มีข้อได้เปรียบเหล่านี้จะดีกว่าที่จะใช้องค์ประกอบ HTML ดั้งเดิมหรือความสามารถของ SolidJs เช่นพอร์ทัลอย่างมีประสิทธิภาพ

ส่วนประกอบที่มีสไตล์แทนที่จะเป็นส่วนประกอบที่มีสไตล์

การใช้ CSS โดยตรงนั้นขมวดคิ้วในทุกวันนี้ แต่ไม่ถูกต้อง CSS ที่สร้างขึ้นอย่างดีจะมีประสิทธิภาพสูงกว่าส่วนประกอบสไตล์ ควรทำเช่นนั้นด้วย

• มีเลือดออกน้อยที่สุด (คำนำหน้าคลาส sb-[component] , การรีเซ็ต CSS, สไตล์พื้นฐาน, ตัวแปรธีม)
• ชื่อคลาสความหมายเช่น. .primary.sb-button
• การพิจารณาอย่างรอบคอบของ A11Y
• ทำงานได้มากที่สุดในสภาพแวดล้อมที่ไม่ใช่ JS (SSR)
• Theme-able, Dark Mode, Inline Mode Switch เป็นไปได้
• TODO: เค้าโครงตอบสนอง

การใช้งาน

yarn
yarn dev

เพื่อใช้ส่วนประกอบ

 import { Accordion , AccordionHeader } from "solid-blocks" ;

const MyApp = ( ) => {
  return (
    < Accordion >
      < AccordionHeader > Accordion </ AccordionHeader >
      < p > Hidden </ p >
    </ Accordion >
  ) ;
} ;