Filament - это популярный строитель администратора Laravel Admin, который тесно интегрирован с CSS Taillid для стиля. Tailwind CSS-это коммунальная структура CSS, которая обеспечивает низкоуровневые полезные классы, позволяющая разработчикам эффективно создавать индивидуальные конструкции пользовательского интерфейса. Тем не менее, многие разработчики спрашивают, могут ли они использовать другую структуру CSS вместо Taillid CSS для стилей.
Прямой ответ заключается в том, что нить в основном предназначена для работы с CSS Tailigh, а его компоненты, темы и пользовательский интерфейс в значительной степени зависят от уроков и конвенций Tailwind. Эта плотная связь означает, что переключение Tailwind для другой структуры CSS официально не поддерживается или просто. Тем не менее, с некоторыми усилиями и настройками, можно адаптировать другие каркасы CSS для использования с нити, но это включает в себя пользовательское строительство тем, переопределение стилей по умолчанию и, возможно, восстановление некоторых частей пользовательского интерфейса с нуля.
***
Зависимость нити от Tailwind CSS
Filament использует Tailwind CSS в качестве своей структуры стиля по умолчанию и основного стиля. Вся его система дизайна и компоненты используют утилиты Tailwind для макета, расстояния, цветов, типографии, отзывчивости, интерактивности и темы. Пользовательский интерфейс администратора по умолчанию построен с Tailwind, и многие плагины и расширения филаментов также предполагают, что он используется в качестве фонда CSS.
Поскольку Tailwind CSS использует подход первого утилиты, темы филаментов включают в себя добавление и настройку утилиты Tail Whore, а не написание традиционных CSS или полагаться на глобально определенные классы. Это приводит к очень гибкому и настраиваемому пользовательскому интерфейсу, но также означает, что компоненты филаментов ожидают, что утилиты с популярностью будут присутствовать правильно.
***
Использование других систем CSS с нити: вызовы и подходы
Попытка заменить CSS Tailwind на другой каркас CSS, такой как начальная загрузка, булма, фундамент или материализование, сталкивается с несколькими проблемами:
-Имена и утилиты классов: Другие рамки имеют разные имена классов и методологии CSS (например, Bootstrap использует семантические имена классов, такие как `.btn`,` .container`, тогда как Tailwind использует классы утилиты, такие как `bg-blue-500`,` p-4`). Компоненты филаментов широко используют имена классов Tailwind, поэтому для замены CSS требуется переписывание классов компонентов или создание аналогичных стилей в новой структуре.
- Отзывчивые и сетчатые системы: Tailwind использует свои собственные отзывчивые дизайнерские утилиты на основе мобильной системы сетки. Другие рамки имеют разные определения сетки и точки останова, которые могут не отображаться чисто с подходом Tailwind.
- Пользовательские компоненты и взаимодействия: многие компоненты пользовательского интерфейса филаментов интегрируют переходы, анимации и состояния на основе тренажера. Это может потребоваться воспроизвести с помощью JavaScript или других возможностей CSS Frameworks.
-Процесс сборки: Процесс сборки филамента обычно включает в себя настройку компилятора Tailwind (JIT) (JIT) для создания только необходимых классов CSS. Использование другой структуры означает настройку или замену конвейера CSS Build.
Несмотря на эти препятствия, могут рассмотреть передовые пользователи, которые хотят использовать другую структуру:
- Создание пользовательской темы нити: вы можете переопределить представления по умолчанию и компоненты лезвия, чтобы использовать классы CSS по вашему выбору, применяя классы вашей CSS Framework вместо Tailwind. Это требует глубокого знания как внутренних филаментов, так и выбранной вами структуры CSS.
- Использование, совместимых с Tailwind: некоторые каркасы CSS или библиотеки пользовательского интерфейса строятся сверху или совместимы с Tailwind (например, Daisyui), которые могут добавлять предварительно построенные компоненты и более легкие тематические темы поверх CSS с полной заменой.
- Замена Tailwind CSS на ванильную CSS или пользовательскую утилиту: вместо полной структуры CSS некоторые разработчики создают минимальную библиотеку CSS, вдохновленную подходом Tailwind. Это может работать, но означает создание многих стилей самостоятельно.
***
Альтернативы Taillid CSS для стиля.
Если вы хотите использовать другую структуру CSS для нити, вот краткий обзор некоторых популярных альтернатив и того, как они сравниваются для этого варианта использования:
-начальная загрузка: наиболее широко используемая каркас CSS, предлагающая стиль на основе компонентов с предварительно определенными классами для кнопок, форм, сетки и т. Д. Начальная загрузка тяжелее, чем туалетный, а не в утилите. Интеграция начальной загрузки с филаментацией потребует переписывания всех классов Taillide в шаблонах филаментов с начальными классами и, возможно, переписыванием интерактивного поведения с Javascript Bootstrap.
- Булма: современная, легкая структура CSS на основе Flexbox. Он модульный и использует семантические имена классов, а не классы первого утилиты. Подобно начальной загрузке, использование Bulma с филаментацией требует индивидуального переопределения темы и переоборудования утилит для ветра для эквивалентов Bulma.
- Фонд: еще одна комплексная структура CSS, поддерживающая сеть и отзывчивые макеты. Его кривая обучения и сложность интеграции похожи на начальную загрузку и булму.
- Materialize или Material UI: CSS Frameworks на основе дизайна материала Google. Они предлагают предварительно построенные компоненты пользовательского интерфейса, которые последовательно стилизованы с принципами дизайна материала. Использование их вместо ветра означает «Пользовательский интерфейс», чтобы соответствовать рекомендациям по материалам и адаптации компонентов с классами, специфичными для материала и сценариями.
- Daisyui: не замена, а плагин для Tailwind CSS, который предоставляет классы компонентов для упрощения стиля. Это может уменьшить вашу рабочую нагрузку CSS, сохраняя при этом основную структуру, полезную для пользователей филаментов, которые хотят более быстрый стиль, не отказавшись от Tail Whord.
***
Технические шаги для использования другой структуры CSS с нити.
Если вы решите продолжить с другой структурой CSS, вот общие технические шаги:
1. Отключите или удалите CSS с треском из трубопровода активов филаментов, чтобы предотвратить столкновения.
2. Добавьте CSS -структуру выбора в ваш проект Laravel через NPM, CDN или прямое включение файла.
3. Переопределите представления и компоненты нити: опубликовать просмотры филаментов с использованием `PHP Artisan Vendor: Publish`, затем отредактируйте шаблоны лезвия, чтобы заменить классы с ветром на классах вашей структуры.
4. Восстановление пользовательских компонентов: если Filament опирается на классы Taillide для интерактивных компонентов, переписывайте эти интерактивные части, используя JavaScript или утилиты JavaScript вашей структуры CSS.
5. Регулируйте конфигурацию: обновите файлы конфигурации накаливания, если это необходимо для размещения пути активов CSS и JS.
6. Тщательно тестируйте пользовательский интерфейс: адаптивная конструкция, доступность и совместимость браузера должны быть подтверждены, так как модель проектирования новой структуры может отличаться.
***
Преимущества и недостатки использования других рамок с нити
Преимущества:
- Вы можете использовать существующие системы знаний и дизайна, знакомые с вашей командой.
- Повторное использование CSS -фреймворков, используемых в других частях вашего приложения для последовательности.
- Возможно, используйте рамки с более готовыми компонентами пользовательского интерфейса, если предпочтительно.
Недостатки:
- Требуется значительные усилия, поскольку нить предназначен для Tailwind CSS по умолчанию.
- теряет жесткие преимущества интеграции, такие как генерация JIT CSS, тематическая легкость и гибкость первой утилиты.
- потенциально приводит к более тяжелым CSS и более длительному времени нагрузки.
- Может усложнить обновление и обслуживание нити и ее тем.
***
Краткое содержание
Система тематических филаментов и компоненты пользовательского интерфейса глубоко интегрированы с CSS Taillid, что делает тейсферу по умолчанию и рекомендуется каркас CSS для тематических тем. Хотя технически возможно использовать другие каркасы CSS, такие как Bootstrap, Bulma, Foundation или Materialize путем создания пользовательских тем и переоценки представлений, это требует существенной работы настройки и хорошего понимания как нити, так и альтернативной структуры.
Для многих разработчиков вместо того, чтобы полностью заменить попутный ветер, использование расширений или плагинов, таких как Daisyui, которые накапливаются на Tailwind CSS, предлагает простую тематическую тематику средней земли с предварительно построенными компонентами, не потеряв преимущества Tailwind.
В заключение, хотя вы можете использовать другую структуру CSS с нити, посредством обширной настройки, Tailwind CSS остается основным и самым простым выбором для разработки теме филамента из-за ее глубокой интеграции, гибкости первого утилиты и оптимизации производительности, адаптированной для системы проектирования филаментов. Если использование другой структуры имеет важное значение, подготовитесь к значительным пользовательским усилиям по разработке, чтобы адаптировать компоненты пользовательского интерфейса и стили пользовательского интерфейса к парадигмам этой структуры.
Этот подход обеспечивает последовательность пользовательского интерфейса, обслуживаемость и лучшее рычаг функций филаментов в проектах административных панелей Laravel.