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

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

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

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

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

Быстрый переход: категории компонентов

Что нужно для работы

Компоненты библиотеки — это компоненты Vue, они работают на Vue 3. Запустить проект можно двумя способами: на Nuxt или на Vue с Vite.

Если приложение написано не на Vue, компоненты не подойдут. Для другого фронтенда UI Kit дает дизайн-токены в виде плагина Tailwind CSS и библиотеку иконок — они совместимы с любым стеком. Оба варианта разобраны в статье Быстрый старт: подключение UI Kit к проекту.

Как использовать компонент

После подключения библиотеки компонент вызывается в шаблоне по имени с префиксом B24:

<template>
  <B24Button>Button</B24Button>
</template>

В документации библиотеки имена компонентов приведены без префикса: раздел Button описывает компонент B24Button.

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

Библиотека делит компоненты на 13 категорий. В таблице приведено по несколько компонентов из каждой, полный состав категории есть в документации библиотеки.

Категория

Для чего

Компоненты

Layout

каркас страницы приложения

B24App, B24Container, B24Header, B24Footer, B24Sidebar

Element

базовые элементы интерфейса

B24Button, B24Alert, B24Avatar, B24Badge, B24Card, B24Progress

Form

поля ввода и формы

B24Form, B24Input, B24Select, B24Checkbox, B24Switch, B24FileUpload

Data

вывод данных

B24Table, B24Accordion, B24Timeline, B24User, B24Empty

Navigation

переходы внутри приложения

B24Breadcrumb, B24Tabs, B24Pagination, B24Stepper, B24Link

Overlay

слои поверх страницы

B24Modal, B24Slideover, B24Drawer, B24Popover, B24Toast, B24Tooltip

Page

блоки для сборки страницы

B24Page, B24PageHeader, B24PageCard, B24PageGrid, B24PageSection

Dashboard

каркас панели с боковым меню

B24DashboardPanel, B24DashboardSidebar, B24DashboardNavbar, B24DashboardToolbar

AI Chat

интерфейс чата с ассистентом

B24Chat, B24ChatMessages, B24ChatPrompt, B24ChatTool

Editor

редактор текста

B24Editor, B24EditorToolbar, B24EditorMentionMenu

Content

поиск и навигация по материалам

B24ContentSearch, B24ContentToc, B24ContentSurround

Color Mode

переключение светлой и темной темы

B24ColorModeButton, B24ColorModeSelect, B24ColorModeSwitch

i18n

выбор языка интерфейса

B24LocaleSelect

Шаблоны проектов

Кроме отдельных компонентов библиотека дает готовые заготовки проектов. Их два вида, каждый в версии для Nuxt и для Vue:

  • Starter — минимальный проект с подключенным UI Kit, подходит для одностраничного приложения или виджета
  • Dashboard — проект с боковым меню, панелью и рабочей областью, подходит для приложения с несколькими разделами

Исходники шаблонов и инструкции по запуску лежат в разделе шаблонов.

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

Компоненты библиотеки:

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

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

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

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

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

Поведение компонента не приходится угадывать: оно уже согласовано с UX-паттернами Битрикс24.

Продолжите изучение

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