flowbite qwik下載 - flowbite qwik源代碼下載

flowbite qwik

三方組件

[email protected]

下載

flowbite qwik -UI組件庫

在Qwik和Tailwind CSS頂部使用組件更快地構建網站

`flowbite-qwik`是在Qwik建造的UI組件的開源集合，其實用程序類別來自Tailwind CSS，您可以用作用戶接口和網站的起點。

在線文檔

文件

flowbite-qwik的文檔尚未完成。

如果您想了解有關Flowbite的更多信息，請訪問Flowbite Docs。

入門

要使用flowbite-qwik ，您只需要正常設置flowbite並從npm安裝flowbite-qwik 。

flowbite可以作為插件包括在現有的尾風CSS項目中。

？使用CLI自動方式

可以使用其CLI自動安裝flowbite-qwik，只需使用此命令：

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