Каталог · реестр на v1.1.1

Компоненты

116 компонентов из 8 пакетов. Каждая карточка открывает страницу с playground, примерами и таблицей API — теги говорят, чего ждать, до перехода.

84 в ядре · 32 в спутниках115 с таблицей API59 с контрактом клавиатуры

Пакеты+4 инструментовбез компонентовЭкосистема →

Действия 3

Кнопки и ссылки — то, что нажимают.

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

Куда попадает сообщение: в поток, поверх или в угол.

  • GrAlert

    Берут, когда сообщение относится к месту на странице

    • ядро
    • Обратная связь
    • API
  • GrBadge

    Берут, когда статус нужен словом

    • ядро
    • Обратная связь
    • API
  • GrBadgeWrap

    Берут, когда счётчик относится к контролу

    • ядро
    • Обратная связь
    • API
  • GrEmptyState

    Берут, когда список пуст с самого начала

    • ядро
    • Обратная связь
    • API
  • GrLoading

    Берут, когда контент уже есть и обновляется

    • ядро
    • Обратная связь
    • API
  • GrProgressBar

    Берут, когда доля выполненного известна

    • ядро
    • Обратная связь
    • API
  • GrProgressCircle

    Берут, когда места по ширине нет

    • ядро
    • Обратная связь
    • API
  • GrResponseErrorBanner

    Берут, когда запрос упал

    • ядро
    • Обратная связь
    • API
  • GrSkeleton

    Берут, когда контента ещё нет

    • ядро
    • Обратная связь
    • API
  • GrToaster

    Берут, когда действие завершилось

    • ядро
    • Обратная связь
    • API
    • ⌨ клавиши

Навигация 12

Где я, куда можно, как вернуться.

  • GrBottomNav

    Берут, когда мобильный интерфейс

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrBreadcrumbs

    Берут, когда вложенность реальна

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrCommandPalette

    Берут, когда команд много и они разбросаны по интерфейсу

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrNavbar

    Берут, когда у приложения есть верхняя панель

    • ядро
    • Навигация
    • API
  • GrPagination

    Берут, когда список не помещается на экран

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrScrollSpy

    Берут, когда длинная страница с разделами

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrSidebar

    Берут, когда разделов много и они постоянны

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrSteps

    Берут, когда оформление заказа или регистрация

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrTabPanels

    Берут, когда к вкладкам нужны панели

    • ядро
    • Навигация
    • API
  • GrTabs

    Берут, когда разделы с разным содержимым

    • ядро
    • Навигация
    • API
    • ⌨ клавиши
  • GrTabsWithPanels

    Берут, когда нужны и вкладки, и панели

    • ядро
    • Навигация
    • API
  • GrTooltip

    Берут, когда подпись к иконочной кнопке

    • ядро
    • Навигация
    • API
    • ⌨ клавиши

Слои 12

Содержимое поверх страницы — и у кого при этом фокус.

  • GrCollapse

    Берут, когда содержимого много, а нужно не всё сразу

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrConfirmDialog

    Берут, когда действие необратимо

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrContextMenu

    Берут, когда действия над строкой списка или узлом дерева

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrDialog

    Берут, когда окно с шапкой, телом и подвалом

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrDialogService

    Берут, когда окно вызывается из кода

    • ядро
    • Слои
  • GrDrawer

    Берут, когда панель приходит от края

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrDropdown

    Берут, когда меню со своими пунктами

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrDropdownMenu

    Берут, когда действия над объектом

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrImageViewer

    Берут, когда картинку нужно рассмотреть

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrModal

    Берут, когда своя раскладка поверх страницы

    • ядро
    • Слои
    • API
    • ⌨ клавиши
  • GrPopover

    Берут, когда своё содержимое у якоря

    • ядро
    • Слои
    • API
  • GrPromptDialog

    Берут, когда нужно одно значение

    • ядро
    • Слои
    • API
    • ⌨ клавиши

Формы 23

Поля, выбор и форма, которая их проверяет.

  • GrAutocomplete

    Берут, когда вариантов слишком много для списка

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrCheckbox

    Берут, когда согласие или флаг в форме

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrCheckboxGroup

    Берут, когда значений несколько из короткого набора

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrColorPicker

    Берут, когда цвет задаёт пользователь

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrFileUpload

    Берут, когда файл уходит на сервер сразу

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrForm

    Берут, когда полей больше одного и они проверяются

    • ядро
    • Формы
    • API
  • GrFormField

    Берут, когда у поля есть подпись

    • ядро
    • Формы
    • API
  • GrFormFile

    Берут, когда файл — значение поля

    • ядро
    • Формы
    • API
  • GrFormSection

    Берут, когда форма длинная

    • ядро
    • Формы
    • API
  • GrInput

    Берут, когда вводится строка

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrInputTag

    Берут, когда значения придумывает пользователь

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrNumberInput

    Берут, когда значение числовое

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrOtpInput

    Берут, когда код приходит извне

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrRadio

    Берут, когда переключатель стоит отдельно

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrRadioGroup

    Берут, когда вариантов до семи и все видны

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrRating

    Берут, когда оценка ставится в один клик

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrSegmented

    Берут, когда переключение вида одного и того же

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrSelect

    Берут, когда поле формы со списком значений

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrSlider

    Берут, когда точное число не важно

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrSwitch

    Берут, когда настройка включается сразу

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrTextarea

    Берут, когда текст длиннее строки

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrTransfer

    Берут, когда состав набирают из справочника

    • ядро
    • Формы
    • API
    • ⌨ клавиши
  • GrTreeSelect

    Берут, когда варианты вложены

    • ядро
    • Формы
    • API
    • ⌨ клавиши

Данные 21

Таблицы, списки, карточки и мелкие значения внутри них.

  • GrAvatar

    Берут, когда человека или сущность узнают по картинке

    • ядро
    • Данные
    • API
  • GrCard

    Берут, когда контенту нужна поверхность

    • ядро
    • Данные
    • API
  • GrCarousel

    Берут, когда галерея товара или объекта

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrChip

    Берут, когда снимаемая метка у сущности

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrChipGroup

    Берут, когда фильтры списка строкой

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrDataTable

    Берут, когда строки сортируют

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrDelta

    Берут, когда число со знаком стоит в предложении

    • ядро
    • Данные
    • API
  • GrDescriptionList

    Берут, когда карточка объекта

    • ядро
    • Данные
    • API
  • GrDivider

    Берут, когда блоки надо разделить

    • ядро
    • Данные
    • API
  • GrFilePreview

    Берут, когда лента вложений

    • ядро
    • Данные
    • API
  • GrIcon

    Берут, когда иконке нужен единый размер

    • ядро
    • Данные
    • API
  • GrJsonViewer

    Берут, когда ответ чужого сервиса разбирают по полям

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrKbd

    Берут, когда показывается сочетание клавиш

    • ядро
    • Данные
    • API
  • GrList

    Берут, когда строки однородные

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrSortableList

    Берут, когда порядок задаёт пользователь

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrStatistic

    Берут, когда один показатель — главный

    • ядро
    • Данные
    • API
  • GrTable

    Берут, когда ячейки оформляет потребитель

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrTimeline

    Берут, когда события идут во времени

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrTree

    Берут, когда данные вложены

    • ядро
    • Данные
    • API
    • ⌨ клавиши
  • GrTreeSections

    Берут, когда корни — категории, а не элементы

    • ядро
    • Данные
    • API
  • GrValue

    Берут, когда пишете свой компонент с величиной

    • ядро
    • Данные
    • API

Утилиты 3

Провайдеры и помощники раскладки без собственного вида.

  • GrAffix

    Берут, когда действия длинной формы

    • ядро
    • Утилиты
    • API
  • GrConfigProvider

    Берут, когда размеры контролов едины на приложение

    • ядро
    • Утилиты
    • API
  • GrSplitter

    Берут, когда двум областям нужна общая граница

    • ядро
    • Утилиты
    • API
    • ⌨ клавиши

Графики 10

Десять графиков на тех же токенах — из @feugene/granularity-charts.

  • GrChartArea

    Берут, когда целое и вклад частей в него во времени

    • charts
    • Графики
    • API
    • ⌨ клавиши
  • GrChartBar

    Берут, когда сколько у каждой категории

    • charts
    • Графики
    • API
    • ⌨ клавиши
  • GrChartBullet

    Берут, когда метрика с порогами, которые уже есть в данных

    • charts
    • Графики
    • API
  • GrChartFunnel

    Берут, когда последовательность ступеней, где каждая — подмножество предыдущей

    • charts
    • Графики
    • API
  • GrChartHeatmap

    Берут, когда матрица удержания по когортам

    • charts
    • Графики
    • API
  • GrChartLine

    Берут, когда как величина менялась

    • charts
    • Графики
    • API
    • ⌨ клавиши
  • GrChartPie

    Берут, когда из чего состоит одно целое

    • charts
    • Графики
    • API
    • ⌨ клавиши
  • GrChartRadar

    Берут, когда форма профиля по нескольким метрикам

    • charts
    • Графики
    • API
  • GrChartWaterfall

    Берут, когда движение от остатка к остатку

    • charts
    • Графики
    • API
    • ⌨ клавиши
  • GrSparkline

    Берут, когда тренд в ячейке таблицы

    • charts
    • Графики
    • API
    • ⌨ клавиши

Дата и время 7

Календари, выбор дат и относительное время — из @feugene/granularity-chrono.

  • GrCalendar

    Берут, когда календарь и есть экран

    • chrono
    • Дата и время
    • API
  • GrDatePicker

    Берут, когда дата — значение поля формы

    • chrono
    • Дата и время
    • API
  • GrDateRangePicker

    Берут, когда отчёт за период

    • chrono
    • Дата и время
    • API
  • GrDateTimePicker

    Берут, когда момент, а не день

    • chrono
    • Дата и время
    • API
  • GrDuration

    Берут, когда сколько заняло

    • chrono
    • Дата и время
    • API
  • GrRelativeTime

    Берут, когда свежесть важнее точности

    • chrono
    • Дата и время
    • API
  • GrTimePicker

    Берут, когда время без даты

    • chrono
    • Дата и время
    • API

Дашборд 5

Сетка виджетов с настройками — из @feugene/granularity-dashboard.

  • GrDashboard

    Берут, когда раскладку определяет пользователь

    • dashboard
    • Дашборд
    • API
  • GrDashboardItem

    Берут, когда любой виджет внутри `GrDashboard`

    • dashboard
    • Дашборд
    • API
  • GrDashboardItemSettings

    Берут, когда у виджета есть что настраивать

    • dashboard
    • Дашборд
    • API
  • GrDashboardPalette

    Берут, когда набор виджетов выбирает пользователь

    • dashboard
    • Дашборд
    • API
  • GrDashboardToolbar

    Берут, когда дашборд редактируемый

    • dashboard
    • Дашборд
    • API

Медиа 4

Камера, кадрирование, сканер и видео — из @feugene/granularity-media.

  • GrCameraCapture

    Берут, когда аватар без файлового менеджера

    • media
    • Медиа
    • API
  • GrCodeScanner

    Берут, когда вход по QR

    • media
    • Медиа
    • API
  • GrImageCrop

    Берут, когда аватар из загруженного файла

    • media
    • Медиа
    • API
  • GrVideoPlayer

    Берут, когда ролик внутри страницы продукта

    • media
    • Медиа
    • API

Код 3

Блок, редактор и diff с вашей подсветкой — из @feugene/granularity-code.

  • GrCodeBlock

    Берут, когда показать ответ сервиса как есть

    • code
    • Код
    • API
    • ⌨ клавиши
  • GrCodeEditor

    Берут, когда Конфиг в админке

    • code
    • Код
    • API
    • ⌨ клавиши
  • GrDiff

    Берут, когда Журнал аудита

    • code
    • Код
    • API
    • ⌨ клавиши

Редактор 2

Форматированный текст на том же контракте формы — из @feugene/granularity-editor.

  • GrMarkdown

    Берут, когда текст пришёл markdown-строкой и его надо показать оформленным

    • editor
    • Редактор
    • API
  • GrRichText

    Берут, когда текст, который читатель увидит оформленным

    • editor
    • Редактор
    • API

Формы по схеме 1

Форма целиком из JSON-схемы — из @feugene/granularity-forms-schema.

  • GrSchemaForm

    Берут, когда бэкенд уже описывает контракт

    • forms-schema
    • Формы по схеме
    • API

Под эти фильтры ничего не подходит

Попробуйте слово короче или снимите пакет и группу.