Эффективная интеграция и кастомизация функционала в Битрикс24 часто требует работы на уровне API. Сегодня мы подробно рассмотрим «Компоненты и шаблоны». Вы узнаете экспертные методики работы с битрикс и научитесь избегать типичных ошибок начинающих разработчиков.

Компоненты и шаблоны

UI Kit Битрикс24 — это библиотека дизайн-согласованных компонентов, которые можно комбинировать, расширять и адаптировать под конкретные задачи. Основная цель — ускорить разработку и обеспечить единообразие интерфейсов во всех приложениях, встроенных в Битрикс24.

Категории компонентов

Компоненты UI Kit сгруппированы по смысловым категориям:

• Действия — кнопки, выпадающие списки, модальные окна, слайдеры
• Нотификации — алерты, тосты, тултипы, прогресс-бары
• Вывод информации — аватары, бейджи, иконки, календари, таблицы
• Ввод данных — инпуты, селекторы, чекбоксы, радиокнопки
• Навигация — меню, табы, линки

Полный список доступных компонентов смотри в подробной документации.

Компонентный подход

Все компоненты:

• построены по принципу композиции — легко объединяются между собой,
• работают с темизацией — внешнее оформление можно подстроить под светлую/темную тему,
• адаптивны — хорошо выглядят на разных разрешениях,
• расширяемы — через slots и props.

Вы можете собирать интерфейсы из готовых деталей без необходимости вручную описывать визуальные стили.

Поведение по умолчанию

UI Kit реализует поведение, к которому привык пользователь Битрикс24:

• отступы, выравнивание, сетки — как в основной платформе,
• логика открытия/закрытия модалок, шторок и выпадашек — идентична платформенным,
• взаимодействие с клавиатурой и фокусами — по стандартам доступности.

Это избавляет от необходимости «угадать», как должен вести себя компонент — все уже согласовано с UX-паттернами Битрикс24.