Компоненты и повторяемые элементы

Не собирайте одинаковое заново

Кнопки, поля и карточки повторяются в интерфейсе. Компонент помогает хранить общую основу, а его экземпляры — использовать её в разных местах. Это удобно, когда нужно изменить общий стиль и сохранить согласованность макета.

Подготовьте небольшой набор

1. Выберите готовую кнопку и создайте из неё компонент.
2. Добавьте несколько экземпляров в разные разделы страницы.
3. Измените один общий параметр основного компонента и проверьте результат на экземплярах.
4. Попробуйте поменять подпись в отдельном экземпляре. Сравните локальное изменение и изменение общей основы.
5. Добавьте ещё одно состояние кнопки или карточки. Дайте состояниям понятные названия; при необходимости объедините близкие варианты.

Не превращайте каждый прямоугольник в сложный компонент. Начните с действительно повторяющихся элементов. Не разрывайте связь с основой без причины: иначе поддерживать единый вид станет сложнее.

Практическое задание

Подготовьте компонент кнопки и компонент карточки услуги. Используйте каждый минимум три раза. Обновите общий отступ или цвет и посмотрите, какие изменения наследуются.

Проверьте себя

• Понятно, где находится основной компонент.
• Экземпляры имеют логичные названия.
• Вы понимаете разницу между общими и локальными изменениями.
• Повторяющиеся элементы выглядят согласованно.