Об этом проекте
AdminLTE — это шаблон пользовательского интерфейса панели управления с открытым исходным кодом, распространяемый под лицензией MIT через AdminLTE.io. Данный репозиторий представляет собой базовую версию на HTML/Bootstrap; тот же дизайн поддерживается в отдельных репозиториях для других стеков.
Технологии и макет
- Построен на Bootstrap 5.3 и vanilla JavaScript, в версии v4 зависимость от jQuery отсутствует.
- Адаптивные макеты, предназначенные для работы на устройствах от маленьких мобильных экранов до больших настольных компьютеров.
- Темный режим использует нативный атрибут data-bs-theme из Bootstrap 5.3 вместо пользовательского класса body.
- Поддержка RTL, а также дополнительные таблицы стилей для цветов: dist/css/adminlte-colors.css (обновленные цвета, читаемый белый текст, 17 пресетов скинов и хук data-lte-primary для брендинга) или dist/css/adminlte-colors-v3.css, сохраняющий 18 цветов AdminLTE 3. В файл adminlte.css ничего не добавляется.
Установка и разработка
- CDN: подключение CSS и JS admin-lte@4 через jsDelivr без этапа сборки.
- 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 описана в README как полная переработка на базе Bootstrap 5.3 без jQuery. Добавлено 18 демо-страниц и переработана документация. Демо-страницы включают приложения (Календарь с FullCalendar, Канбан с SortableJS, Чат, Менеджер файлов, Проекты, Почтовый ящик), формы (четырехэтапный мастер с валидацией), таблицы (на базе Tabulator, без jQuery), страницы (Профиль, Настройки, Счет, Цены, FAQ) и страницы ошибок (404, 500, Техническое обслуживание).
В примечаниях к релизу 4.3 упоминается плагин SidebarSearch, который фильтрует боковое меню при вводе, разворачивает соответствующее подменю и восстанавливает меню при очистке; угловые баннеры-ленты трех размеров с зеркальным отображением в RTL; виджеты социальных сетей и постов (.user-block, .post, .widget-user, .widget-user-2, .description-block); а также три новые демо-страницы (Галерея, Результаты поиска, Ленты). В общий обзор UI были добавлены навигационные вкладки, модальные окна и offcanvas, а в документации появились страницы для карточек, прочего и переключателя языков, чтобы каждый компонент с CSS имел справочную страницу.
Миграция с v3
В README перечислены критические изменения: переименование классов, такие как .wrapper в .app-wrapper, .main-header в .app-header, .main-sidebar в .app-sidebar, .content-wrapper в .app-main; изменения атрибутов data, такие как data-toggle на data-bs-toggle, data-widget="pushmenu" на data-lte-toggle="sidebar" и аналогично для treeview; перенос темного режима на data-bs-theme. Папка bundled plugins/ удалена, и добавлена таблица соответствия, где каждому jQuery-виджету v3 назначен преемник на vanilla-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 плюс tag helpers для 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, проведите линтинг перед коммитом и откройте pull request. Проект распространяется под лицензией MIT; в README также указаны ссылки на премиум-шаблоны и возможности пожертвований через GitHub Sponsors или PayPal наряду с бесплатной версией.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.