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

Выберите инструмент для разработки с AI-агентом:

  • используйте Битрикс24 Вайбкод, чтобы создать приложение для Битрикс24 по описанию задачи без знания языков программирования. Агент напишет код и разместит приложение на сервере без ручной настройки хостинга
  • используйте MCP-сервер, чтобы разрабатывать интеграцию через REST API в своем проекте. Агент будет обращаться к официальной REST-документации

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

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

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

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

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

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

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

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

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

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

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

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

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

Предыдущая
Принципы дизайна
Следующая
Интеграция c REST API и бизнес-логикой