solid blocks

Solidblocks

UI -Bausteine für SolidJs

Kernkonzepte

Wertvolle Komponenten anstelle von Komponenten ohne Mehrwert

Das Wickeln von Elementen wie Header, Text oder Bildern in benutzerdefinierten Komponenten ist einfach verschwenderisch. Komponenten werden nur dann bereitgestellt, wenn sie einen Mehrwert für ihre einheimischen Elemente haben. Der Mehrwert kann sein

• Benutzererfahrung
• Zugänglichkeit
• Entwicklererfahrung
• Leistung

Wenn keiner dieser Vorteile bereitgestellt werden kann, ist es vorzuziehen, native HTML -Elemente oder SolidJs -Fähigkeiten wie Portal effektiv zu verwenden.

Komponenten mit Stil anstelle von gestalteten Komponenten

Die direkte Verwendung von CSS wird heutzutage verpönt, aber nicht zu Recht. Gut gefertigte CSS übertreffen die gestalteten Komponenten problemlos. Es sollte dies mit tun

• Minimale Blutungen (Klassenpräfix sb-[component] , CSS-Reset, Grundstile, Themenvariablen)
• Semantische Klassennamen, dh .primary.sb-button
• sorgfältige Überlegung von A11y
• Funktioniert so viel wie möglich in Nicht-JS-Umgebungen (SSR)
• themenfähiger, dunkler Modus, Inline-Modus-Schalter möglich
• TODO: Responsive Layout

Verwendung

yarn
yarn dev

Um die Komponenten zu verwenden

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

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