Идеальная кнопка с React Aria! Создайте библиотеку компонентов React с помощью Tailwind CSS и Nex...
Build SaaS with Ethan
0:00 / 0:00
Идеальная кнопка с React Aria! Создайте библиотеку компонентов React с помощью Tailwind CSS и Nex...
5 078 просмотров · 3 года назад
Build SaaS with Ethan
7,74 тыс. подписчиков
5 078 просмотров · 3 года назад
Поднимите свои компоненты на новый уровень с помощью библиотеки React Aria. Эта замечательная библиотека решает проблемы кроссбраузерной совместимости и делает ваши компоненты похожими на нативные кнопки. В этом видео мы с большим успехом используем её для создания идеальной кнопки. Она просто идеальна.
Она использует Class Variance Authority и Tailwind Merge. Сохраняйте подсказки CSS в вашем коде Tailwind с помощью этого фрагмента. Добавьте это в файл `settings.json` в VS Code:
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
⚡️ Демо ⚡️
https://button-advanced.vercel.app/
📰 Подписка на рассылку 📰
Подпишитесь на мою рассылку «Немного о SaaS», чтобы быть в курсе последних тенденций, советов и ресурсов в постоянно развивающейся индустрии SaaS.
https://ethanmick.com/newsletter/
🔖 Разделы 🔖
00:00 - Введение
01:23 - React Aria
02:53 - Подключение Wire It Up
11:16 - Финал Результат: внешний вид и функциональность
12:41 - Заключение
📜 Код 📜
• https://ethanmick.com/advanced-button/
• React Aria: https://react-spectrum.adobe.com/reac...
👨🏼💻 Обо мне 👨🏼💻
Я ведущий разработчик программного обеспечения и архитектор, который любит создавать крутое облачное программное обеспечение.
• Блог: https://ethanmick.com/
• Нанять меня: https://ethanmick.dev/