Компоненты

Обзор

Компоненты объединяют примитивы в повторяющиеся предустановки дизайна и повторно используемые строительные блоки приложений. Как и примитивы, они получают данные и функции обратного вызова из вашего приложения. Используйте соответствующий импорт семейства, указанный ниже. Агрегированная точка входа twenty-ui/components также остаётся доступной. У редактора кода есть собственная точка входа, twenty-ui/components/code-editor, поскольку для него требуется Monaco. Сведения об установке и настройке темы см. в разделе Начало работы.

Ввод

Импортируйте из twenty-ui/components/input.

Component	Назначение
MainButton	Основные действия со сплошной поверхностью, приподнятым видом и полужирным текстом.
LightButton	Легковесные действия со стандартным или ненавязчивым акцентом.
IconButton	Квадратные или круглые действия со значками, построенные на основе Button.
LightIconButton	Облегчённые действия со значками со стандартным или ненавязчивым акцентом.
Кнопка реакции	Реакции-эмодзи с количеством и управляемым состоянием нажатия.
Выбор страны для телефона	Флаги стран с возможностью поиска и выбором кода вызова.
NumberStepper	Компактное числовое поле ввода с необязательными кнопками шага.
Поле поиска	Текст поиска и необязательные элементы управления фильтрами.
Выбор страны	Варианты стран с возможностью поиска, флаги и явный пустой выбор.
Выбор валюты	Валюты с возможностью поиска и явным форматированием.
Ввод изображения	Выбор и предварительный просмотр изображений с загрузками, принадлежащими вызывающей стороне.
Сегментированный элемент управления	Компактный выбор с помощью радиокнопок с объединёнными текстовыми вариантами или вариантами со значками.

Component	Назначение
ListItemButton	Нативные кнопки действий со стилизацией строки списка.
Раскрывающееся меню	Меню действий, средства выбора с возможностью поиска и панели форм.
Кнопка вкладки	Ссылки на маршруты и смежные действия с тем же внешним видом, что и вкладки.

Отображаемые данные

Импортируйте из twenty-ui/components/data-display.

Component	Назначение
DetailsRow	Выровненные метки, переносящиеся значения и необязательные действия.
Строка метрик	Метки и отформатированные значения с необязательным определенным индикатором выполнения.
Группа аватаров	Перекрывающиеся аватары и счётчики переполнения.
Блок команд	Текст команды с необязательным действием копирования.
Дерево JSON	Разворачиваемые значения JSON и именованные записи.
StackIcon	Значки с меньшим элементом, расположенным в правом нижнем углу.
Плитка со значком и оттенком	Значки на плитках цвета темы.

Обратная связь

Импортируйте из twenty-ui/components/feedback.

Component	Назначение
Всплывающее уведомление	Уведомления, управление очередью и закрытие.
Выноска	Семантические сообщения с действиями и возможностью закрытия.
Встроенный баннер	Компактные баннеры с необязательными действиями.
ToastProvider и Toaster	Хранилища уведомлений, ограничения очереди и рендеринг.

Макет

Импортируйте из twenty-ui/components/layout.

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

Настройки

Импортируйте из twenty-ui/components/settings.

Component	Назначение
Строка настроек	Переключатели с подписями для настроек и фильтров.

Редактор кода

Импортируйте из twenty-ui/components/code-editor.

Component	Назначение
Редактор кода	Редактирование кода с Monaco, необязательным заголовком и темой Twenty.

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

Разработчики

Приложения

API

Самостоятельный хостинг

Внести вклад

Библиотека интерфейса

Обзор

Ввод

Навигация

Отображаемые данные

Обратная связь

Макет

Настройки

Редактор кода

​Обзор

​Ввод

​Навигация

​Отображаемые данные

​Обратная связь

​Макет

​Настройки

​Редактор кода

Обзор

Ввод

Навигация

Отображаемые данные

Обратная связь

Макет

Настройки

Редактор кода