Download flowbite qwik - Download Kode Sumber flowbite qwik

flowbite qwik

Komponen pihak ketiga

[email protected]

Unduh

Flowbite Qwik - Perpustakaan Komponen UI

Bangun situs web lebih cepat dengan komponen di atas Qwik dan CSS Tailwind

`flowbite-qwik` adalah koleksi open source komponen UI, dibangun di QWIK, dengan kelas utilitas dari CSS tailwind yang dapat Anda gunakan sebagai titik awal untuk antarmuka pengguna dan situs web.

Dokumentasi online

Daftar isi

Dokumentasi
Memulai
- Membutuhkan melalui npm
Komponen
Hak Cipta dan Lisensi

Dokumentasi

Dokumentasi untuk flowbite-qwik belum selesai.

Jika Anda ingin mempelajari lebih lanjut tentang Flowbite, kunjungi Dokumen Flowbite.

Memulai

Untuk menggunakan flowbite-qwik , Anda hanya perlu mengatur flowbite secara normal dan menginstal flowbite-qwik dari npm .

flowbite dapat dimasukkan sebagai plugin ke dalam proyek CSS tailwind yang ada.

? Cara Otomatis Menggunakan CLI

Flowbite-qwik dapat diinstal secara otomatis menggunakan CLI-nya, cukup gunakan perintah ini:

 npx flowbite-qwik-cli@latest init

Klik di sini untuk lebih jelasnya.

? Cara manual melalui `npm`

Pastikan Anda memiliki Node.js dan CSS Tailwind.

Instal flowbite sebagai ketergantungan menggunakan npm dengan menjalankan perintah berikut:

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

Membutuhkan flowbite sebagai plugin di dalam file 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 ] ,
}

Pengaturan penyedia flowbite-qwik

Dalam file src/root.tsx Anda, impor FlowbiteProvider dan bungkus aplikasi Anda dengannya dan tentukan posisi tema dan roti bakar.

Nilai default adalah theme="blue" dan toastPosition="top-right" .

Jika Anda ingin menggunakan mode gelap, Anda juga perlu menambahkan komponen FlowbiteProviderHeader di kepala aplikasi Anda.

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