flowbite qwik Download - flowbite qwik Código fonte download

flowbite qwik

Componentes de terceiros

[email protected]

Baixar

Flowbite Qwik - Biblioteca de componentes da interface do usuário

Construa sites ainda mais rápidos com componentes no topo do QWIK e do Tailwind CSS

`flowbite-qwik` é uma coleção de componentes de interface do usuário de código aberto, construído em QWIK, com classes de utilitário do Tailwind CSS que você pode usar como ponto de partida para interfaces e sites do usuário.

Documentação online

Índice

Documentação
Começando
- Exigir via npm
Componentes
Direitos autorais e licença

Documentação

A documentação para flowbite-qwik ainda não foi concluída.

Se você quiser aprender mais sobre Flowbite, visite Docs Flowbite.

Começando

Para usar flowbite-qwik , você só precisa configurar flowbite normalmente e instalar flowbite-qwik a partir npm .

flowbite pode ser incluído como um plug -in em um projeto CSS existente.

? Maneira automática usando CLI

O Flowbite-Qwik pode ser instalado automaticamente usando sua CLI, basta usar este comando:

 npx flowbite-qwik-cli@latest init

Clique aqui para mais detalhes.

? Maneira manual via `npm`

Certifique -se de ter o Node.js e o Tailwind CSS instalados.

Instale flowbite como uma dependência usando npm executando o seguinte comando:

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

Requer flowbite como um plug -in dentro do arquivo 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 Provedores

No seu arquivo src/root.tsx , importe o FlowbiteProvider e envolva seu aplicativo com ele e defina o tema e a posição de brinde.

Os valores padrão são theme="blue" e toastPosition="top-right" .

Se você deseja usar o modo escuro, também precisará adicionar o componente FlowbiteProviderHeader na cabeça do seu aplicativo.

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