تنزيل flowbite qwik - تنزيل رمز المصدر flowbite qwik

flowbite qwik

مكونات الطرف الثالث

[email protected]

تنزيل

FlowBite Qwik - مكتبة مكون واجهة المستخدم

قم ببناء مواقع الويب بشكل أسرع مع مكونات أعلى CSS و Tailwind

`flowbite-qwik` عبارة عن مجموعة مفتوحة المصدر من مكونات واجهة المستخدم ، التي تم إنشاؤها في QWIK ، مع فئات الأدوات المساعدة من CSS Tailwind التي يمكنك استخدامها كنقطة انطلاق لمواقع المستخدم ومواقع الويب.

الوثائق عبر الإنترنت

جدول المحتويات

الوثائق
ابدء
- تتطلب عبر 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 ] ,
}

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