このプロジェクトについて
AdminLTEは、AdminLTE.ioによってMITライセンスで配布されているオープンソースの管理ダッシュボードUIテンプレートです。本リポジトリはHTML/Bootstrapコアエディションであり、同じデザインが他のスタック向けに個別のリポジトリとして維持されています。
技術とレイアウト
- Bootstrap 5.3とバニラJavaScriptに基づいて構築されており、v4ではjQueryへの依存関係がなくなりました。
- 小型のモバイル画面から大型のデスクトップまで適合するように設計されたレスポンシブレイアウトを採用しています。
- ダークモードは、カスタムのbodyクラスではなく、Bootstrap 5.3ネイティブのdata-bs-theme属性を使用します。
- RTL(右から左への記述)をサポートし、オプションのカラースタイルシートを提供しています。dist/css/adminlte-colors.css(再設計されたカラー、白文字の可読性、17のスキンプリセット、ブランディング用のdata-lte-primaryフック)または、AdminLTE 3の18色を維持したdist/css/adminlte-colors-v3.cssが利用可能です。adminlte.cssには何も追加されません。
インストールと開発
- CDN: jsDelivrからadmin-lte@4のCSSとJSをリンクし、ビルドステップなしで利用可能です。
- npm: npm install admin-lte@4でインストールします。
- Composer: composer require almasaeed2010/adminlteで導入します。
- AdminLTE自体の開発: npm install後、npm startでポート3000にライブリロード付きの開発サーバーを起動します。npm run buildで開発アセットを生成し、npm run productionでフルリント、最適化、bundlewatchパイプラインを実行します。また、個別のnpm run css、npm run js、npm run lintタスクもドキュメント化されています。
v4での変更点
v4ラインは、jQueryなしのBootstrap 5.3によるゼロからの書き直しとしてREADMEに記載されています。18のデモページが追加され、ドキュメントが刷新されました。デモページには、アプリ(FullCalendarを使用したカレンダー、SortableJSを使用したカンバン、チャット、ファイルマネージャー、プロジェクト、メールボックスの受信/閲覧/作成)、フォーム(バリデーション付きの4ステップウィザード)、テーブル(Tabulatorベースのデータテーブル、jQueryフリー)、ページ(プロフィール、設定、請求書、価格設定、FAQ)、およびエラーページ(404、500、メンテナンス)が含まれます。
4.3のリリースノートでは、入力中にサイドバーメニューをフィルタリングし、一致するサブメニューを展開し、クリア時にメニューを復元するSidebarSearchプラグインについて言及されています。また、RTLでミラーリングされる3サイズのリボンコーナーバナー、ソーシャルおよびポストウィジェット(.user-block, .post, .widget-user, .widget-user-2, .description-block)、および3つの新しいデモページ(ギャラリー、検索結果、リボン)が追加されました。UIショーケースにはナビゲーションタブ、モーダル、オフキャンバスが追加され、ドキュメントにはカード、その他、言語切り替えページが追加され、CSSが提供されるすべてのコンポーネントにリファレンスページが用意されました。
v3からの移行
READMEには破壊的変更がリストされています。クラス名の変更(.wrapper → .app-wrapper, .main-header → .app-header, .main-sidebar → .app-sidebar, .content-wrapper → .app-main)、データ属性の変更(data-toggle → data-bs-toggle, data-widget="pushmenu" → data-lte-toggle="sidebar" およびtreeviewの同様の変更)、ダークモードのdata-bs-themeへの移行などが含まれます。同梱されていたplugins/フォルダは削除され、v3のjQueryウィジェットをバニラJSの後継にマッピングするテーブルが提供されています(例:Select2 → Tom Select, DataTables → Tabulator, Summernote → Quill)。
フレームワークエディション
個別のリポジトリにより、ReactおよびNext.js、Vue 3およびNuxt、Laravel(Bladeコンポーネント、設定駆動メニュー、認証スキャフォールディング)、Django(再利用可能なアプリ、メニューフィルタパイプライン、テーマ付き管理画面)、Symfony(Twigコンポーネント、AssetMapper、EasyAdminテーマ)、Angular、ASP.NET Core(BlazorコンポーネントおよびMVC/Razor Pagesタグヘルパー)、Drupalに同じダッシュボードが統合されています。それぞれ独自のパッケージマネージャーのエントリポイントを通じてインストールされます。
デプロイとセキュリティ
AdminLTEはUIテンプレートです。本番環境へのデプロイでは、コンパイル済みのdistアセットとアプリケーションファイルのみを配布し、node_modules、デモHTMLページ、またはsrc/は決して含めないでください。READMEでは、CVE-2021-36471は論争中であり、例ファイルが誤ってデプロイされた場合にデモページにアクセス可能になることに言及しており、認証とベストプラクティスに関する詳細なガイダンスはSECURITY.mdに記載されています。
ブラウザサポート、貢献およびライセンス
Bootstrap 5.3は、Chrome、Firefox、Safari、Edgeの現行バージョンをサポートしており、ビルドスクリプトはWindows、macOS、Linuxでクロスプラットフォームに動作します。貢献はmasterブランチを対象としており、Node.js LTSをインストールし、npm installとnpm startを実行し、コミット前にリントを行い、プルリクエストを作成します。プロジェクトはMITライセンスで提供されており、READMEでは無料版に加えて、プレミアムテンプレート、GitHub Sponsors、またはPayPalによる寄付オプションについても案内されています。
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.