solid blocks

固體塊

UI solidjs的構建塊

核心概念

有價值的組件而不是沒有附加值的組件

定制組件中的標題，文本或圖像等包裝元素浪費。僅當組件與本機元素具有附加值時，才能提供。附加的值可能是

• 用戶體驗
• 可訪問性
• 開發人員的經驗
• 表現

如果無法提供這些優點，則最好有效地使用本機HTML元素或SolidJS的能力。

具有樣式而不是樣式組件的組件

如今，直接使用CSS皺眉，但事實並非如此。精心製作的CSS可以輕鬆勝過樣式的組件。它應該這樣做

• 最小出血（類前綴sb-[component] ，CSS重置，基本樣式，主題變量）
• 語義類名稱，即.primary.sb-button
• 仔細考慮A11y
• 在非JS環境（SSR）中盡可能地工作
• 主題，黑暗模式，內聯模式開關可能
• Todo：響應式佈局

用法

yarn
yarn dev

使用組件

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

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