flowbite astro admin dashboard
1.0.0
このプロジェクトは、Flowbite のコンポーネントを使用して構築された無料のオープンソース UI 管理ダッシュボード テンプレートで、チャート、テーブル、ウィジェット、CRUD レイアウト、モーダル、ドロワーなどを備えたユーティリティファーストの Tailwind CSS フレームワークに基づいています。
この管理ダッシュボードは、Tailwind CSS や Flowbite などのオープンソース領域の最新の UI/UX 開発テクノロジを使用して、プロジェクト用のアプリケーションの構築をすぐに開始するのに役立ちます。
| ダッシュボード | 積み上げレイアウト | 製品（CRUD） |
|---|---|---|
| ユーザー (CRUD) | 設定 | 価格ページ |
|---|---|---|
| ログインページ | 登録ページ | パスワードをリセットする |
|---|---|---|
| パスワードをお忘れですか | プロファイルロック | メンテナンスページ |
|---|---|---|
| 404が見つかりません | 500サーバーエラー | 遊び場 |
|---|---|---|
ナビゲーションバー、モーダル、ドロワー、ツールチップなどの対話型コンポーネントはすべて、Flowbite と呼ばれる人気のオープンソース コンポーネント ライブラリに基づいています。これにより、本格的な管理ダッシュボード内でより複雑なページとウィジェットのセットを作成することで、これらの要素を使用できるようになります。テンプレート。
すべてのページ、ウィジェット、およびコンポーネントは、Tailwind CSS のユーティリティファースト クラスのみに基づいており、テンプレート パスに基づいてすべてのクラスを自動的に削除することにより、テクノロジーの最新のv3.xと互換性があります。
チャート ウィジェット、テーブル、日付ピッカー、統計情報を含むダッシュボードのホームページの 2 つの異なるレイアウトと、製品、ユーザー、設定ページ、ログインと登録のための認証ページ、さらには 2 つの CRUD レイアウト ページを含む 15 の高度なサンプル ページから始めてください。カスタム 404 および 500 エラー ページ。
この管理ダッシュボードには、Flowbite だけでなく、Tailwind CSS クラスでカスタム調整され、Flowbite デザイン システムに基づいて設計された ApexCharts などの他のサードパーティ ライブラリの両方からの高度なコンポーネントが多数含まれています。
このプロジェクトを使用する場合は、このダッシュボードの構築に使用したコンポーネント ライブラリも検討することをお勧めします。そのライブラリのさらに多くのコンポーネントを使用して、ここで既にコーディングした例を拡張できるからです。
この製品は、広く使用されている次のテクノロジーを使用して構築されています。
package.jsonファイルからプロジェクトの依存関係をインストールします。 pnpm install
# or
npm install
# or
yarn説明のために PNPM が最適なパッケージ マネージャーですが、必要なものを使用できます。
localhost:2121で Astro ローカル開発サーバーを起動します。 pnpm run dev次のコマンドを実行して、プロジェクトをビルドし、 dist/フォルダー内の配布ファイルを取得することもできます。
pnpm run build次に、生成されたビルドをローカル Web サーバーでプレビューできます。
pnpm run previewデプロイメントについては、GitHub ワークフローを参照してください。ここで、ターゲット (GitHub ページ用に事前構成) をプラグインできます。 docs.astro.build/en/guides/deploy を参照してください。
Web サイトは静的展開用に構成されていますが、 ./astro.config.mjsのoutput: "server"サーバー側レンダリングに切り替えることができます。
このリポジトリのクローンを作成すると、次の (簡略化された) 構造が表示されます。
?
├── ? data
│ └── ** / * .json # Satic data sources for REST etc.
│
└── src
│
├── ? app
│ └── ** / * .astro # Application-wide components
│
├── ? assets
│ └── ** / * .{svg,…} # Transformable assets
│
├── ? components
│ └── ** / * .astro # Simple, atomic UI elements
│
├── lib
│ └── ** / * .ts # Utilities (Databases, APIs…)
│
├── ? modules
│ └── ** / * .astro # Complex views made of elements
│
├── ? pages
│ ├── ** / * .astro # File-based client routes
│ │
│ └── api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── services
│ └── * .ts # Server-side CRUD operations
│
└── ? types
└── * .ts # Data entities typings
迅速なオンボーディングと開発者のエクスペリエンスに努めてきました。
このプロジェクトには、TypeScript、Astro、Tailwind、VS Code の広範なサポートが付属しています。
賢明なデフォルト、少しの意見、そしてうまく連携させるためのいくつかのトリックで構成されています。
astro-eslint-parser + eslint-plugin-astro搭載prettier-plugin-astro搭載 ( astroにバンドルされています)自分のニーズに合わせて、これらの設定を自由にハックしてください。
現時点では、次のブラウザの最後の 2 つのバージョンを正式にサポートすることを目指しています。
ライブプレビュー: https://themesberg.github.io/flowbite-astro-admin-dashboard/
Flowbite ドキュメント: https://flowbite.com/docs/getting-started/introduction/
Tailwind CSS ドキュメント: https://tailwindcss.com/
ライセンス契約: https://flowbite.com/docs/getting-started/license/
問題: Github の問題ページ
Flowbite と Tailwind CSS の互換性のあるテクノロジーとガイドのリストは次のとおりです。
この素晴らしいオープンソース コミュニティは、React、Vue、Svelte、Angular 用の次のスタンドアロン ライブラリも構築し、現在維持しています。
また、次のフロントエンド フレームワークとライブラリの統合ガイドも作成しました。
Flowbite はバニラ JavaScript に依存しているため、ほとんどのバックエンド フレームワークとの優れた統合が可能です。
Flowbite 管理者ダッシュボードの公式バグ トラッカーとして GitHub Issues を使用しています。問題を報告したいユーザーへのアドバイスは次のとおりです。
ご質問がある場合、または製品の統合に関してサポートが必要な場合は、問題を解決するのではなく、お問い合わせください。
