flowbite qwikダウンロードflowbite qwikソースコードのダウンロード

flowbite qwik

サードパーティ製コンポーネント

[email protected]

ダウンロード

FlowBite QWIK -UIコンポーネントライブラリ

QWIKとTailwind CSSの上にコンポーネントを使用すると、さらに高速にWebサイトを構築する

`flowbite-qwik`は、QWIKに組み込まれたUIコンポーネントのオープンソースコレクションであり、Tailwind CSSのユーティリティクラスがあり、ユーザーインターフェイスとWebサイトの出発点として使用できます。

オンラインドキュメント

ドキュメント

flowbite-qwikのドキュメントはまだ完成していません。

Flowbiteの詳細については、Flowbite Docsにアクセスしてください。

はじめる

flowbite-qwikを使用するには、 flowbiteを正常にセットアップし、 npmからflowbite-qwikをインストールするだけです。

flowbite 、既存のTailwind CSSプロジェクトへのプラグインとして含めることができます。

？ CLIを使用した自動方法

FlowBite-QWIKは、CLIを使用して自動的にインストールできます。このコマンドを使用するだけでは、

 npx flowbite-qwik-cli@latest init

詳細については、ここをクリックしてください。

？ `npm`経由の手動方法

Node.jsとTailwind CSSがインストールされていることを確認してください。

次のコマンドを実行することにより、 npmを使用して依存関係としてflowbiteをインストールします。

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

tailwind.config.jsファイル内のプラグインとしてflowbite必要です。

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