flowbite qwik Download - flowbite qwik Source Code Download

flowbite qwik

Composants tiers

[email protected]

Télécharger

FlowBite Qwik - Bibliothèque de composants UI

Créer des sites Web encore plus rapidement avec des composants au-dessus de QWik et Tailwind CSS

`flowbite-qwik` est une collection open source de composants d'interface utilisateur, intégrés à Qwik, avec des cours d'utilité de Tailwind CSS que vous pouvez utiliser comme point de départ pour les interfaces et sites Web utilisateur.

Documentation en ligne

Table des matières

Documentation
Commencer
- Exiger via npm
Composants
Copyright et licence

Documentation

La documentation de flowbite-qwik n'est pas encore terminée.

Si vous voulez en savoir plus sur FlowBite, visitez FlowBite Docs.

Commencer

Pour utiliser flowbite-qwik , il vous suffit de configurer flowbite normalement et d'installer flowbite-qwik de npm .

flowbite peut être inclus comme plugin dans un projet CSS de vent arrière existant.

? Moyen automatique en utilisant CLI

FlowBite-Qwik peut être automatiquement installé à l'aide de sa CLI, utilisez simplement cette commande:

 npx flowbite-qwik-cli@latest init

Cliquez ici pour plus de détails.

? Manuel via `npm`

Assurez-vous que Node.js et Tailwind CSS sont installés.

Installez flowbite en tant que dépendance à l'aide npm en exécutant la commande suivante:

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

Exiger flowbite en tant que plugin à l'intérieur du fichier 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 ] ,
}

Configuration des fournisseurs flowbite-qwik

Dans votre fichier src/root.tsx , importez le FlowbiteProvider et enveloppez votre application avec et définissez la position du thème et du toast.

Les valeurs par défaut sont theme="blue" et toastPosition="top-right" .

Si vous souhaitez utiliser le mode Dark, vous devrez également ajouter le composant FlowbiteProviderHeader dans la tête de votre application.

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