Этот проект представляет собой бесплатный шаблон панели администратора пользовательского интерфейса с открытым исходным кодом, созданный с использованием компонентов Flowbite и основанный на служебной CSS-инфраструктуре Tailwind, включающей диаграммы, таблицы, виджеты, макеты CRUD, модальные окна, ящики и многое другое.
Эта панель администратора может быстро помочь вам приступить к созданию приложения для вашего проекта с использованием новейших технологий разработки UI/UX в области с открытым исходным кодом, включая Tailwind CSS и Flowbite.
Интерактивные компоненты, такие как панели навигации, модальные окна, ящики и всплывающие подсказки, основаны на популярной библиотеке компонентов с открытым исходным кодом под названием Flowbite, которая позволяет нам использовать эти элементы путем создания более сложного набора страниц и виджетов внутри полноценной панели администратора. шаблон.
Все страницы, виджеты и компоненты основаны исключительно на служебных классах Tailwind CSS и совместимы с последней версией технологии v3.x
за счет автоматической очистки всех классов на основе путей шаблона.
Начните работу с 15 расширенных страниц примеров, включая два разных макета домашней страницы информационной панели, полной виджетов диаграмм, таблиц, средств выбора даты и статистики, а также с двух страниц макета CRUD для продуктов, пользователей, страницы настроек, страниц аутентификации для входа и регистрации и даже пользовательские страницы ошибок 404 и 500.
Эта панель администратора содержит множество расширенных компонентов как из Flowbite, так и из других сторонних библиотек, таких как ApexCharts, которые были специально адаптированы с помощью CSS-классов Tailwind и разработаны на основе системы дизайна Flowbite.
Если вы хотите использовать этот проект, мы рекомендуем также изучить библиотеку компонентов, которую мы использовали для создания этой информационной панели, потому что вы можете использовать еще больше компонентов из этой библиотеки для улучшения примеров, которые мы уже написали здесь.
Этот продукт создан с использованием следующих широко используемых технологий:
CSS попутного ветра: Tailwindcss.com
Флоубит: flowbite.com
УГО gohugo.io
Веб-пакет webpack.js.org
Панель администратора Flowbite
JavaScript-фреймворки
Внутренние фреймворки
Создано с помощью Flowbite
Классы утилит Tailwind CSS
15 страниц с примерами
Расширенные компоненты
Документация Flowbite
Рабочий процесс
Оглавление
Демо-страницы
Быстрый старт
Структура файла
Поддержка браузера
Ресурсы
Отчеты о проблемах
Техническая поддержка или вопросы
Лицензирование
Полезные ссылки
Авторы
Клонируйте этот репозиторий или загрузите ZIP-файл.
Убедитесь, что у вас установлены Node.js и NPM.
Установите зависимости проекта из файла package.json
:
npm install
Создайте локальный сервер на localhost:1313
выполнив следующую команду:
npm run start
Вы также можете собрать проект и получить файлы дистрибутива внутри папки public/
выполнив:
npm run build
Вы можете мгновенно загрузить свой проект в Vercel, выбрав конфигурацию HUGO по умолчанию, но в зависимости от вашего собственного технологического стека, будь то React.js, Vue, Nuxt.js, Next.js или серверная среда, вы также можете просто скопировать макеты. из этого проекта внутри вашего собственного технологического стека.
Вот список совместимых технологий и руководств для Flowbite и Tailwind CSS:
Замечательное сообщество открытого исходного кода также создало и в настоящее время поддерживает следующие автономные библиотеки для React, Vue, Svelte и Angular:
Библиотека React Flowbite
Библиотека Flowbite Vue
Библиотека Flowbite Svelte
Угловая библиотека Flowbite
Мы также написали руководства по интеграции для следующих интерфейсных фреймворков и библиотек:
Flowbite с руководством по React
Руководство по Flowbite с Next.js
Flowbite с руководством по Vue
Руководство по Flowbite с Nuxt.js
Flowbite с направляющей Svelte
Flowbite отлично интегрируется с большинством серверных фреймворков, поскольку использует стандартный JavaScript:
Использование Flowbite с Laravel
Использование Flowbite с Ruby on Rails 7
Использование Flowbite с Django
Использование Flowbite с Flask
В загрузке вы найдете следующие каталоги и файлы:
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
В настоящее время мы официально стремимся поддерживать две последние версии следующих браузеров:
Предварительный просмотр в реальном времени: 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
Мы используем GitHub Issues в качестве официального средства отслеживания ошибок для панели администратора Flowbite. Вот несколько советов для наших пользователей, которые хотят сообщить о проблеме:
Убедитесь, что вы используете последнюю версию панели администратора Flowbite. Проверьте CHANGELOG на своей панели управления на странице выпусков GitHub.
Предоставление нам воспроизводимых действий по устранению проблемы сократит время, необходимое для ее устранения.
Некоторые проблемы могут быть связаны с конкретным браузером, поэтому может помочь указание, в каком браузере вы столкнулись с проблемой.
Если у вас есть вопросы или вам нужна помощь в интеграции продукта, свяжитесь с нами, а не открывайте проблему.
Авторские права Bergside Inc., 2019–2023 гг. (https://flowbite.com)
С открытым исходным кодом под лицензией MIT.
Библиотека Flowbite — компоненты с открытым исходным кодом, созданные с помощью Tailwind CSS.
Flowbite Figma — система проектирования, созданная для Figma
Flowbite Blocks — Создание разделов для веб-сайтов и приложений.
Flowbite Pro — большая коллекция последних трех версий с открытым исходным кодом.
Золтан Сёгеньи
Роберт Танислав