flowbite qwik Download - flowbite qwik Source Code Download

flowbite qwik

Komponenten von Drittanbietern

[email protected]

Herunterladen

Flowbite Qwik - UI -Komponentenbibliothek

Erstellen Sie Websites noch schneller mit Komponenten auf Qwik und Tailwind CSS

`flowbite-qwik` ist eine Open-Source-Sammlung von UI-Komponenten, die in QWIK integriert sind, mit Dienstprogrammklassen von Tailwind-CSS, die Sie als Ausgangspunkt für Benutzeroberflächen und Websites verwenden können.

Online -Dokumentation

Inhaltsverzeichnis

Dokumentation
Erste Schritte
- Über npm benötigen
Komponenten
Urheberrecht und Lizenz

Dokumentation

Die Dokumentation für flowbite-qwik ist noch nicht fertig.

Wenn Sie mehr über Flowbite erfahren möchten, besuchen Sie Flowbite -Dokumente.

Erste Schritte

Um flowbite-qwik zu verwenden, müssen Sie nur flowbite normal einrichten und flowbite-qwik von npm installieren.

flowbite kann als Plugin in ein vorhandenes Rückenwind -CSS -Projekt aufgenommen werden.

? Automatische Art und Weise mit CLI

Flowbite-Qwik kann automatisch mit seiner CLI installiert werden. Verwenden Sie diesen Befehl einfach:

 npx flowbite-qwik-cli@latest init

Klicken Sie hier, um weitere Informationen zu erhalten.

? Manueller Weg über `npm`

Stellen Sie sicher, dass Sie über Node.js und Rückenwind -CSS installiert sind.

Installieren Sie flowbite als Abhängigkeit mit npm , indem Sie den folgenden Befehl ausführen:

yarn add -D flowbite flowbite-qwik
pnpm add -D flowbite flowbite-qwik
npm i --save-dev flowbite flowbite-qwik

Erfordern Sie flowbite als Plugin in der Datei tailwind.config.js :

 import flowbitePlugin from 'flowbite/plugin'

export default {
  theme : {
    extend : {
      animation : {
        'from-left' : 'slideFromLeft 0.2s 1' ,
        'from-right' : 'slideFromRight 0.2s 1' ,
      } ,
      keyframes : {
        slideFromLeft : {
          '0%' : { transform : 'translateX(-100%)' } ,
          '100%' : { transform : 'translateX(0)' } ,
        } ,
        slideFromRight : {
          '0%' : { transform : 'translateX(100%)' } ,
          '100%' : { transform : 'translateX(0)' } ,
        } ,
      } ,
    } ,
  } ,
  content : [ 'node_modules/flowbite-qwik/**/*.{cjs,mjs}' , './src/**/*.{html,js,jsx,ts,tsx,mdx}' ] ,
  plugins : [ flowbitePlugin ] ,
}

Setup flowbite-qwik -Anbieter

Importieren Sie in Ihrer Datei src/root.tsx den FlowbiteProvider und wickeln Sie Ihre App damit ein und definieren Sie das Thema und die Toastposition.

Standardwerte sind theme="blue" und toastPosition="top-right" .

Wenn Sie den dunklen Modus verwenden möchten, müssen Sie auch die FlowbiteProviderHeader -Komponente in den Kopf Ihrer App hinzufügen.

 import { FlowbiteProvider } from 'flowbite-qwik'

export default component$ ( ( ) => {
  return (
    < QwikCityProvider >
      < head >
        < meta charSet = "utf-8" />
        < RouterHead />
        // Add this line to detect user's system preference
        < FlowbiteProviderHeader />
      </ head >
      < body lang = "fr" >
        // Add the FlowbiteProvider component to wrap your app
        < FlowbiteProvider toastPosition = "top-right" theme = "blue" >
          < RouterOutlet />
        </ FlowbiteProvider >
      </ body >
    </ QwikCityProvider >
  )
} )