このプロジェクトは、Flowbite のコンポーネントを使用して構築された無料のオープンソース UI 管理ダッシュボード テンプレートで、チャート、テーブル、ウィジェット、CRUD レイアウト、モーダル、ドロワーなどを備えたユーティリティ ファーストの Tailwind CSS フレームワークに基づいています。
この管理ダッシュボードは、Tailwind CSS や Flowbite などのオープンソース領域の最新の UI/UX 開発テクノロジを使用して、プロジェクト用のアプリケーションの構築をすぐに開始するのに役立ちます。
ナビゲーションバー、モーダル、ドロワー、ツールチップなどの対話型コンポーネントはすべて、Flowbite と呼ばれる人気のオープンソース コンポーネント ライブラリに基づいています。これにより、本格的な管理ダッシュボード内でより複雑なページとウィジェットのセットを作成することで、これらの要素を使用できるようになります。テンプレート。
すべてのページ、ウィジェット、およびコンポーネントは、Tailwind CSS のユーティリティファースト クラスのみに基づいており、テンプレート パスに基づいてすべてのクラスを自動的に削除することにより、テクノロジーの最新のv3.x
と互換性があります。
チャート ウィジェット、テーブル、日付ピッカー、統計情報を含むダッシュボードのホームページの 2 つの異なるレイアウトと、製品、ユーザー、設定ページ、ログインと登録のための認証ページ、さらには 2 つの CRUD レイアウト ページを含む 15 の高度なサンプル ページから始めてください。カスタム 404 および 500 エラー ページ。
この管理ダッシュボードには、Flowbite だけでなく、Tailwind CSS クラスでカスタム調整され、Flowbite デザイン システムに基づいて設計された ApexCharts などの他のサードパーティ ライブラリの両方からの高度なコンポーネントが多数含まれています。
このプロジェクトを使用する場合は、このダッシュボードの構築に使用したコンポーネント ライブラリについても検討することをお勧めします。そのライブラリのさらに多くのコンポーネントを使用して、ここで既にコーディングした例を拡張できるからです。
この製品は、広く使用されている次のテクノロジーを使用して構築されています。
テイルウィンド CSS: tailwindcss.com
フローバイト: flowbite.com
ヒューゴ gohugo.io
Webpack webpack.js.org
Flowbite 管理者ダッシュボード
JavaScript フレームワーク
バックエンドフレームワーク
フローバイトで構築
Tailwind CSS ユーティリティ クラス
15 のサンプルページ
高度なコンポーネント
フローバイトのドキュメント
ワークフロー
目次
デモページ
クイックスタート
ファイル構造
ブラウザのサポート
リソース
問題の報告
テクニカルサポートまたは質問
ライセンス
役立つリンク
著者
このリポジトリのクローンを作成するか、ZIP ファイルをダウンロードします
Node.js と NPM がインストールされていることを確認してください
package.json
ファイルからプロジェクトの依存関係をインストールします。
npm install
次のコマンドを実行して、 localhost:1313
にローカル サーバーを作成します。
npm run start
次のコマンドを実行して、プロジェクトをビルドし、 public/
フォルダー内の配布ファイルを取得することもできます。
npm run build
デフォルトの HUGO 構成を選択すると、プロジェクトを Vercel に即座にアップロードできますが、React.js、Vue、Nuxt.js、Next.js またはバックエンド フレームワークなど、独自の技術スタックに応じて、レイアウトをコピーするだけで済みます。あなた自身の技術スタック内のこのプロジェクトから。
Flowbite と Tailwind CSS の互換性のあるテクノロジーとガイドのリストは次のとおりです。
この素晴らしいオープンソース コミュニティは、React、Vue、Svelte、Angular 用の次のスタンドアロン ライブラリも構築し、現在維持しています。
Flowbite React ライブラリ
Flowbite Vue ライブラリ
フローバイト スヴェルト ライブラリ
Flowbite Angular ライブラリ
また、次のフロントエンド フレームワークとライブラリの統合ガイドも作成しました。
React ガイド付きフローバイト
Next.js を使用した Flowbite ガイド
Vue ガイドを使用した Flowbite
Nuxt.js を使用した Flowbite ガイド
Svelteガイド付きフローバイト
Flowbite はバニラ JavaScript に依存しているため、ほとんどのバックエンド フレームワークとの優れた統合が可能です。
Laravel で Flowbite を使用する
Ruby on Rails 7 で Flowbite を使用する
Django で Flowbite を使用する
Flask で Flowbite を使用する
ダウンロード内には、次のディレクトリとファイルがあります。
Flowbite Admin Dashboard . ├── LICENSE ├── README.md ├── config.yml ├── content ├── data ├── layouts ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── resources ├── src ├── static ├── tailwind.config.js ├── webpack.config.js └── yarn.lock
現時点では、次のブラウザの最後の 2 つのバージョンを正式にサポートすることを目指しています。
ライブプレビュー: https://flowbite-admin-dashboard.vercel.app/
Flowbite ドキュメント: https://flowbite.com/docs/getting-started/introduction/
Tailwind CSS ドキュメント: https://tailwindcss.com/
ライセンス契約: https://flowbite.com/docs/getting-started/license/
問題: Github の問題ページ
Flowbite 管理者ダッシュボードの公式バグ トラッカーとして GitHub Issues を使用しています。問題を報告したいユーザーへのアドバイスは次のとおりです。
最新バージョンの Flowbite 管理者ダッシュボードを使用していることを確認してください。 GitHub リリース ページのダッシュボードから CHANGELOG を確認してください。
問題に対する再現可能な手順を提供していただくと、問題の修正にかかる時間が短縮されます。
一部の問題はブラウザーに固有である可能性があるため、どのブラウザーで問題が発生したかを指定すると役立つ場合があります。
ご質問がある場合、または製品の統合についてサポートが必要な場合は、問題を解決するのではなく、お問い合わせください。
Copyright 2019-2023 Bergside Inc. (https://flowbite.com)
MITライセンスに基づくオープンソース
Flowbite ライブラリ - Tailwind CSS で構築されたオープンソース コンポーネント
Flowbite Figma - Figma 用に構築された設計システム
Flowbite ブロック - Web サイトとアプリケーションの構築セクション
Flowbite Pro - 後者の 3 つのオープンソース バージョンのより大きなコレクション
ゾルタン・シュジェニ
ロバート・タニスラフ