@skbkontur/ext-uideprecated

Компоненты, используемые в проектах reestro

Usage no npm install needed!

<script type="module">
  import skbkonturExtUi from 'https://cdn.skypack.dev/@skbkontur/ext-ui';
</script>

README

Библиотека React-компонентов

Компоненты, используемые в проектах reestro

Fias

Альтернатива Klard, список свойств компонента:

  • value
  • onChange
  • baseUrl - url для запросов к fias api
  • title - заголовок в модальном окне
  • error - текст ошибки
  • readOnly
  • validFn - функция валидации полей
  • isShowAddressText - флаг, выводить ли адрес в компоненте
  • btnTitle и iconTitle - свои текст и иконка

FiasUtils

Вспомогательные функции:

  • getAddressText - представление объекта адреса в виде строки
  • getLastFiasId - получение последнего (по уровням адресного объекта) определенного в адресе fiasid

ErrorPage

Страница ошибки

  • logoColor - цвет текста логотипа (обязательный)
  • logoSuffix - название проекта (обязательный)
  • supportLink - ссылка на почту поддержки (обязательный)
  • title - заголовок страницы (обязательный)
  • body - дополнительный текст на странице
  • basepath - ссылка на главную (по умолчанию: "/")
  • goToBasepath - метод для перехода на главную (для роутинга в SPA)

ErrorCard

Карточка ошибки

  • supportLink - ссылка на почту поддержки (обязательный при отсутствии body)
  • title - заголовок страницы (обязательный)
  • body - дополнительный текст на странице
  • hasDecoration - нужен ли верхний толстый и цветной бордер (по умочанию: true)
  • color - цвет верхней границы карточки
  • className - дополнительный класс для карточки
  • maxWidth - максимальная ширина (по умолчанию: 1166, такая же, как у TopBar в retail-ui)

Footer

Компонент подвала сайта, список свойств:

  • supportLink - ссылка на email поддержки (обязательное)
  • supportPhone - телефон поддержки (обязательное)
  • maxWidth - максимальная ширина (по умолчанию: 1166, такая же, как у TopBar в retail-ui)

Card

Компонент карточки, список свойств:

  • backLink - разметка для ссылки, ведущей назад
  • color - цвет верхней границы карточки
  • className - дополнительный класс для карточки
  • hasDecoration - нужен ли верхний толстый и цветной бордер (по умочанию: true)
  • maxWidth - максимальная ширина (по умолчанию: 1166, такая же, как у TopBar в retail-ui)

InfoCard

Карточка с плывущими облаками для информационных страниц

  • hasDecoration - нужен ли верхний толстый и цветной бордер (по умочанию: true)
  • color - цвет верхней границы карточки
  • maxWidth - максимальная ширина (по умолчанию: 1166, такая же, как у TopBar в retail-ui)

Table

Компонент таблицы, список свойств:

  • columnWidths - массив ширин колонок
  • paddingLeft - левый отступ таблицы
  • paddingRight - правый отступ таблицы
  • rows - массив данных для рядов таблицы
  • head - массив заголовков
  • emptyText - текст, если таблица пуста
  • isLoading - статус загрузки
  • loadingText - текст для загрузки
  • hasError - содержит ли ошибку
  • errorText - текст для ошибки
  • onRowClick - метод обработки клика по строке

Colored

Компонент для задания цвета тексту (например, статусу), список свойств:

  • type - определяет цвет текста (варианты: error или danger - красный, warning - желтый, success - зеленый, default - наследуется от родителя)