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 >
  ) ;
} ;