flowbite qwik скачать - загрузка исходного кода flowbite qwik

flowbite qwik

Сторонние компоненты

[email protected]

Скачать

Flowbite QWIK - библиотека компонентов пользовательского интерфейса

Создание веб -сайтов еще быстрее с компонентами на вершине Qwik и Tailwind CSS

`flowbite-qwik` -это коллекция компонентов пользовательского интерфейса с открытым исходным кодом, встроенный в QWIK, с классами утилит от Tailwind CSS, которые вы можете использовать в качестве отправной точки для пользовательских интерфейсов и веб-сайтов.

Онлайн -документация

Документация

Документация для 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 >
  )
} )