ดาวน์โหลด flowbite qwik - ดาวน์โหลดซอร์สโค้ด flowbite qwik

flowbite qwik

ส่วนประกอบของบุคคลที่สาม

[email protected]

ดาวน์โหลด

flowbite qwik - ui component library

สร้างเว็บไซต์ได้เร็วขึ้นด้วยส่วนประกอบที่อยู่ด้านบนของ Qwik และ Tailwind CSS

`flowbite-qwik` เป็นคอลเลกชันโอเพ่นซอร์สของส่วนประกอบ UI ที่สร้างขึ้นใน QWIK พร้อมคลาสยูทิลิตี้จาก Tailwind CSS ที่คุณสามารถใช้เป็นจุดเริ่มต้นสำหรับส่วนต่อประสานและเว็บไซต์ของผู้ใช้

เอกสารออนไลน์

สารบัญ

เอกสาร
เริ่มต้น
- ต้องการผ่าน npm
ส่วนประกอบ
ลิขสิทธิ์และใบอนุญาต

เอกสาร

เอกสารสำหรับ flowbite-qwik ยังไม่เสร็จ

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Flowbite ให้ไปที่เอกสาร Flowbite

เริ่มต้น

ในการใช้ flowbite-qwik คุณเพียงแค่ตั้งค่า flowbite ตามปกติและติดตั้ง flowbite-qwik จาก npm

flowbite สามารถรวมเป็นปลั๊กอินลงในโครงการ CSS tailwind ที่มีอยู่

- โดยอัตโนมัติโดยใช้ CLI

สามารถติดตั้ง FlowBite-qwik โดยอัตโนมัติโดยใช้ CLI เพียงใช้คำสั่งนี้:

 npx flowbite-qwik-cli@latest init

คลิกที่นี่เพื่อดูรายละเอียดเพิ่มเติม

- วิธีด้วยตนเองผ่าน `npm`

ตรวจสอบให้แน่ใจว่าคุณติดตั้ง Node.js และ Tailwind CSS

ติดตั้ง flowbite เป็นการพึ่งพาโดยใช้ npm โดยเรียกใช้คำสั่งต่อไปนี้:

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

ต้องการ flowbite เป็นปลั๊กอินภายในไฟล์ 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 ] ,
}

ผู้ให้บริการ flowbite-qwik

ในไฟล์ src/root.tsx ของคุณนำเข้า FlowbiteProvider และห่อแอปของคุณด้วยและกำหนดธีมและตำแหน่งขนมปังปิ้ง

ค่าเริ่มต้นคือ theme="blue" และ toastPosition="top-right"

หากคุณต้องการใช้โหมดมืดคุณจะต้องเพิ่มส่วนประกอบ FlowbiteProviderHeader ในหัวแอปของคุณ

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