Als Webentwickler, der sich für Leistung begeistert, wollte ich eine Reihe von Komponenten, die die Wiederverwendbarkeit von Qwik voll ausnutzen. Aus diesem Grund habe ich Corrosive Components erstellt, eine Bibliothek, die speziell auf Qwik zugeschnitten ist, um das Erstellen leistungsstarker und interaktiver Benutzeroberflächen zum Kinderspiel zu machen, die über alle Funktionen verfügt, einfach zu verwenden und unabhängig von anderen Paketen ist.
Sie können die Crossive Components-Bibliothek mit npm oder bun installieren. Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:
npm install crossive-components
Brötchen installiert Crossive-Komponenten
Fügen Sie useStyles(DefaultStyle) mit useStyles(DefaultResources) oder useStyles(DefaultDarkResources) zum Stammlayoutelement hinzu, um Stile anzuwenden.
import { DefaultResources, // or(DefaultDarkResources) DefaultStyle, } from 'corrosive-components' export default component$(() => { useStyles$(DefaultResources) // or(useStyles$(DefaultDarkResources)) useStyles$(DefaultStyle) return ( // content ) })
Weitere Informationen finden Sie in der Installationsanleitung
Wenn Sie das Paket lieber nicht installieren möchten, können Sie den Quellcode für einzelne Komponenten und deren Stile direkt kopieren und in Ihrem Projekt verwenden.
Beachten Sie, dass Sie noch DefaultResources oder DefaultDarkResources zum Stammlayoutelement hinzufügen müssen.
Styling-Übersicht
Stile in korrosiven Komponenten bestehen aus zwei Teilen: Ressourcen, die die Variablen enthalten, und Stile, die die regulären Stile enthalten.
Der Standardstil ist DefaultStyle und die Ressourcen sind DefaultResources und DefaultDarkResources, die kompilierte Inline-CSS-Dateien sind.
Schauen Sie sich den Styling-Guide an, um mehr zu erfahren
Dieser Artikel wurde von Mahdi Movahedian Atar geschrieben, dem Entwickler und Betreuer korrosiver Komponenten.
Das obige ist der detaillierte Inhalt vonKorrosive Komponenten: Eine neue Komponentenbibliothek für qwik. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!