Программирование [protailwind] Компоненты Tailwind с несколькими стилями (2023)

[Trinity]

[protailwind] Компоненты Tailwind с несколькими стилями (2023)

На этом мастер-классе вы узнаете, как наилучшим образом создавать и управлять несколькими вариантами стилей для ваших компонентов пользовательского интерфейса, используя Tailwind CSS.

Движок Just-in-Time в Tailwind CSS не поддерживает динамические имена классов. Это приводит к чрезмерно сложным условным операторам и вложенным тернарным операторам, которые трудно отслеживать и еще сложнее добавлять новые варианты

На протяжении этого мастер-класса вы построите и практиковать повторяемый процесс для выявления, рефакторинга и реализации динамических наборов стилей с использованием Tailwind CSS.


Темы, которые мы рассмотрим

Этот мастер-класс разделен на три раздела: работа с кнопками, модальными окнами и рефакторинг демонстрационного приложения календаря из Мастер-класса. Эти разделы взаимодействуют друг с другом, исследуя разные способы определения и поддержания вариантов стилей для ваших компонентов.

• Создание динамических вариантов размера, формы и цвета для увеличения гибкости
• Настройка плагина Tailwind IntelliSense для VS Code для оптимизации вашего рабочего процесса разработки
• Реализация асинхронно-готового доступного модального окна с настраиваемыми анимированными переходами
• Рефакторинг сложной условной логики в дискретные состояния

К концу этого мастер-класса у вас будет:

• способность расширять ваши компоненты пользовательского интерфейса для поддержки нескольких вариантов стилей с использованием Tailwind CSS.
• удобство в определении и выполнении повторяемого процесса рефакторинга сложных стилей компонентов в более чистую и легко поддерживаемую структуру кода.

Материал на английском языке

Подробнее:

Для просмотра ссылок необходимо выполнить Вход или Регистрация

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.