UI-компоненты

Библиотека React-компонентов. Позволяет создавать мини-приложения для супераппа TSU.InTime.

Установка

1. Подготовьте React-приложение.

2. Установите необходимые пакеты

yarn - yarn add "@tsu.intime/tsu-intime-ui" "@tsu.intime/tsu-intime-bridge"
npm - npm install "@tsu.intime/tsu-intime-ui" "@tsu.intime/tsu-intime-bridge"

@tsu.intime/tsu-intime-bridge предназначена осуществления одностороннего взаимодействия с супераппом.

3. Добавьте meta-тег в index.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover" />

4. Задайте стили (Подробнее о Safe-Area).

html,
body {
  margin: 0;
  height: 100vh;
  overscroll-behavior: none;
}

Компоненты

View

Основной компонент для контента.

API

Свойство	Описание	Тип	Значение по умолчанию
children	Основной контент	ReactNode	-
header	Шапка View	ReactNode	-
interface	Интерфейс View, положение элементов необходимо указывать, используя position: absolute	ReactNode	-

ActivityIndicator

Спиннер для отображения состояния загрузки страницы/раздела.

API

Свойство	Описание	Тип	Значение по умолчанию
size	Размер спиннера	"small" | "default"	"default"

Button

Кнопка.

API

Свойство	Описание	Тип	Значение по умолчанию
size	Размер кнопки	"small" | "large"	-
block	Наследует ли кнопка всю ширину родителя	boolean	false
isLoading	Заменяет весь контент на ActivityIndicator и блокирует кнопку для нажатия	boolean	false
disabled	Блокирует кнопку для нажатия	boolean	false
onClick	Устанавливает обработчик нажатия на кнопку	(event: MouseEvent) => void	-

Input / InputTextarea

Поле для ввода.

API

Свойство	Описание	Тип	Значение по умолчанию
suffix	Иконка, отображаемая справа от поля	ReactNode	-
changeValue	Устанавливает обработчик для ввода текста	(value: string) => void	-
allowClear	Отображает кнопку для очистки поля	boolean	false
defaultValue	Значение по умолчанию	string	-
placeholder	Подсказка	string	-

Surface

Контейнер.

API

Свойство	Описание	Тип	Значение по умолчанию
type	Цвет фона	"primary" | "secondary" | "accent" | "accent-green" | "accent-faded" | "accent-green-faded"	-
borderRadius	Радиус скругления углов (px)	number	8
padding	Внутренний отступ (px)	number	16
children	Содержимое	ReactNode	-

Text

Компонент для отображения текста.

API

Свойство	Описание	Тип	Значение по умолчанию
fontStyle	Стиль текста	"header-2" | "body" | "body-bold" | "footnote" | "footnote-bold" | "small-footnote"	body
className	CSS-класс	string	-
isSelectable	Флаг, определяющий доступность текста для выделения	boolean	false
children	Содержимое	ReactNode	-

Цвета

Все используемые в библиотеке цвета вынесены в css-custom-properties.

.MyDiv {
  background: var(--surface-accent-green);
}