Берут, когда действие меняет состояние
Каталог · реестр на v1.1.1
Компоненты
116 компонентов из 8 пакетов. Каждая карточка открывает страницу с playground, примерами и таблицей API — теги говорят, чего ждать, до перехода.
Действия 3
Кнопки и ссылки — то, что нажимают.
- GrButton
- GrButtonGroup
Берут, когда действия одного класса стоят рядом
- GrLink
Берут, когда нужен переход
Обратная связь 10
Куда попадает сообщение: в поток, поверх или в угол.
- GrAlert
Берут, когда сообщение относится к месту на странице
- GrBadge
Берут, когда статус нужен словом
- GrBadgeWrap
Берут, когда счётчик относится к контролу
- GrEmptyState
Берут, когда список пуст с самого начала
- GrLoading
Берут, когда контент уже есть и обновляется
- GrProgressBar
Берут, когда доля выполненного известна
- GrProgressCircle
Берут, когда места по ширине нет
- GrResponseErrorBanner
Берут, когда запрос упал
- GrSkeleton
Берут, когда контента ещё нет
- GrToaster
Берут, когда действие завершилось
Слои 12
Содержимое поверх страницы — и у кого при этом фокус.
- GrCollapse
Берут, когда содержимого много, а нужно не всё сразу
- GrConfirmDialog
Берут, когда действие необратимо
- GrContextMenu
Берут, когда действия над строкой списка или узлом дерева
- GrDialog
Берут, когда окно с шапкой, телом и подвалом
- GrDialogService
Берут, когда окно вызывается из кода
- GrDrawer
Берут, когда панель приходит от края
- GrDropdown
Берут, когда меню со своими пунктами
- GrDropdownMenu
Берут, когда действия над объектом
- GrImageViewer
Берут, когда картинку нужно рассмотреть
- GrModal
Берут, когда своя раскладка поверх страницы
- GrPopover
Берут, когда своё содержимое у якоря
- GrPromptDialog
Берут, когда нужно одно значение
Формы 23
Поля, выбор и форма, которая их проверяет.
- GrAutocomplete
Берут, когда вариантов слишком много для списка
- GrCheckbox
Берут, когда согласие или флаг в форме
- GrCheckboxGroup
Берут, когда значений несколько из короткого набора
- GrColorPicker
Берут, когда цвет задаёт пользователь
- GrFileUpload
Берут, когда файл уходит на сервер сразу
- GrForm
Берут, когда полей больше одного и они проверяются
- GrFormField
Берут, когда у поля есть подпись
- GrFormFile
Берут, когда файл — значение поля
- GrFormSection
Берут, когда форма длинная
- GrInput
Берут, когда вводится строка
- GrInputTag
Берут, когда значения придумывает пользователь
- GrNumberInput
Берут, когда значение числовое
- GrOtpInput
Берут, когда код приходит извне
- GrRadio
Берут, когда переключатель стоит отдельно
- GrRadioGroup
Берут, когда вариантов до семи и все видны
- GrRating
Берут, когда оценка ставится в один клик
- GrSegmented
Берут, когда переключение вида одного и того же
- GrSelect
Берут, когда поле формы со списком значений
- GrSlider
Берут, когда точное число не важно
- GrSwitch
Берут, когда настройка включается сразу
- GrTextarea
Берут, когда текст длиннее строки
- GrTransfer
Берут, когда состав набирают из справочника
- GrTreeSelect
Берут, когда варианты вложены
Данные 21
Таблицы, списки, карточки и мелкие значения внутри них.
- GrAvatar
Берут, когда человека или сущность узнают по картинке
- GrCard
Берут, когда контенту нужна поверхность
- GrCarousel
Берут, когда галерея товара или объекта
- GrChip
Берут, когда снимаемая метка у сущности
- GrChipGroup
Берут, когда фильтры списка строкой
- GrDataTable
Берут, когда строки сортируют
- GrDelta
Берут, когда число со знаком стоит в предложении
- GrDescriptionList
Берут, когда карточка объекта
- GrDivider
Берут, когда блоки надо разделить
- GrFilePreview
Берут, когда лента вложений
- GrIcon
Берут, когда иконке нужен единый размер
- GrJsonViewer
Берут, когда ответ чужого сервиса разбирают по полям
- GrKbd
Берут, когда показывается сочетание клавиш
- GrList
Берут, когда строки однородные
- GrSortableList
Берут, когда порядок задаёт пользователь
- GrStatistic
Берут, когда один показатель — главный
- GrTable
Берут, когда ячейки оформляет потребитель
- GrTimeline
Берут, когда события идут во времени
- GrTree
Берут, когда данные вложены
- GrTreeSections
Берут, когда корни — категории, а не элементы
- GrValue
Берут, когда пишете свой компонент с величиной
Утилиты 3
Провайдеры и помощники раскладки без собственного вида.
- GrAffix
Берут, когда действия длинной формы
- GrConfigProvider
Берут, когда размеры контролов едины на приложение
- GrSplitter
Берут, когда двум областям нужна общая граница
Графики 10
Десять графиков на тех же токенах — из @feugene/granularity-charts.
- GrChartArea
Берут, когда целое и вклад частей в него во времени
- GrChartBar
Берут, когда сколько у каждой категории
- GrChartBullet
Берут, когда метрика с порогами, которые уже есть в данных
- GrChartFunnel
Берут, когда последовательность ступеней, где каждая — подмножество предыдущей
- GrChartHeatmap
Берут, когда матрица удержания по когортам
- GrChartLine
Берут, когда как величина менялась
- GrChartPie
Берут, когда из чего состоит одно целое
- GrChartRadar
Берут, когда форма профиля по нескольким метрикам
- GrChartWaterfall
Берут, когда движение от остатка к остатку
- GrSparkline
Берут, когда тренд в ячейке таблицы
Дата и время 7
Календари, выбор дат и относительное время — из @feugene/granularity-chrono.
- GrCalendar
Берут, когда календарь и есть экран
- GrDatePicker
Берут, когда дата — значение поля формы
- GrDateRangePicker
Берут, когда отчёт за период
- GrDateTimePicker
Берут, когда момент, а не день
- GrDuration
Берут, когда сколько заняло
- GrRelativeTime
Берут, когда свежесть важнее точности
- GrTimePicker
Берут, когда время без даты
Дашборд 5
Сетка виджетов с настройками — из @feugene/granularity-dashboard.
- GrDashboard
Берут, когда раскладку определяет пользователь
- GrDashboardItem
Берут, когда любой виджет внутри `GrDashboard`
- GrDashboardItemSettings
Берут, когда у виджета есть что настраивать
- GrDashboardPalette
Берут, когда набор виджетов выбирает пользователь
- GrDashboardToolbar
Берут, когда дашборд редактируемый
Медиа 4
Камера, кадрирование, сканер и видео — из @feugene/granularity-media.
- GrCameraCapture
Берут, когда аватар без файлового менеджера
- GrCodeScanner
Берут, когда вход по QR
- GrImageCrop
Берут, когда аватар из загруженного файла
- GrVideoPlayer
Берут, когда ролик внутри страницы продукта
Код 3
Блок, редактор и diff с вашей подсветкой — из @feugene/granularity-code.
- GrCodeBlock
Берут, когда показать ответ сервиса как есть
- GrCodeEditor
Берут, когда Конфиг в админке
- GrDiff
Берут, когда Журнал аудита
Редактор 2
Форматированный текст на том же контракте формы — из @feugene/granularity-editor.
- GrMarkdown
Берут, когда текст пришёл markdown-строкой и его надо показать оформленным
- GrRichText
Берут, когда текст, который читатель увидит оформленным
Формы по схеме 1
Форма целиком из JSON-схемы — из @feugene/granularity-forms-schema.
- GrSchemaForm
Берут, когда бэкенд уже описывает контракт
Под эти фильтры ничего не подходит
Попробуйте слово короче или снимите пакет и группу.