Descargar flowbite qwik - Descargar el código fuente de flowbite qwik

flowbite qwik

Componentes de terceros

[email protected]

Descargar

FlowBite Qwik - Biblioteca de componentes de la interfaz de usuario

Cree sitios web aún más rápido con componentes sobre Qwik y Tailwind CSS

`flowbite-qwik` es una colección de componentes de UI de código abierto, construidas en QWIK, con clases de utilidad de CSS Tailwind que puede usar como punto de partida para interfaces y sitios web de usuarios.

Documentación en línea

Tabla de contenido

Documentación
Empezando
- Requerir a través de npm
Componentes
Derechos de autor y licencia

Documentación

La documentación para flowbite-qwik aún no está terminada.

Si desea obtener más información sobre FlowBite, visite FlowBite Docs.

Empezando

Para usar flowbite-qwik , solo necesita configurar flowbite normalmente e instalar flowbite-qwik desde npm .

flowbite se puede incluir como un complemento en un proyecto CSS de viento de cola existente.

? Forma automática usando CLI

FlowBite-Qwik se puede instalar automáticamente utilizando su CLI, simplemente use este comando:

 npx flowbite-qwik-cli@latest init

Haga clic aquí para obtener más detalles.

? Forma manual a través de `npm`

Asegúrese de tener Node.js y Tailwind CSS instalado.

Instale flowbite como dependencia utilizando npm ejecutando el siguiente comando:

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

Requerir flowbite como complemento dentro del archivo 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 ] ,
}

Configuración de proveedores flowbite-qwik

En su archivo src/root.tsx , importe el FlowbiteProvider y envuelva su aplicación y defina la posición de tema y tostada.

Los valores predeterminados son theme="blue" y toastPosition="top-right" .

Si desea usar el modo oscuro, también deberá agregar el componente FlowbiteProviderHeader en el cabezal de su aplicación.

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