D3S1GN42 UI Kit

Витрина компонентов дизайн-системы

Главная страница показывает все текущие Svelte-компоненты и ведет на отдельные страницы каждого компонента. Storybook синхронизирован с этими же демо-сценариями.

Каталог компонентов

Actions

1 component

Button

Основное действие интерфейса в нескольких визуальных вариантах.

Страница

Data Entry

10 components

Calendar

Календарный слой для single/range выбора и событийных сценариев.

Страница

Single

SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11

Range with busy periods

SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
MoTuWeThFrSaSu
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5

DateInput

Поле даты с popover-календарём и режимами single/range.

Страница
Date
01011984

Single mode

Date

Range mode

Checkbox

Двоичный выбор для форм и настроек.

Страница

DragList

Перестановка элементов списком через drag-and-drop.

Страница
1. Первый блок
2. Второй блок
3. Третий блок

Input

Универсальное текстовое поле с label, clear и счетчиком.

Страница

Пример поля с очисткой

NumberInput

Числовое поле в том же визуальном каркасе, что и Input.

Страница

Подходит для числовых значений

Select

Выпадающий список для выбора одного или нескольких значений.

Страница

Выбрано: В работе

Выбрано несколько: Бэклог, Готово

RadioGroup

Выбор одного значения из набора опций.

Страница

Switch

Переключатель true/false для быстрых настроек.

Страница

Textarea

Многострочное поле с ресайзом, clear и счетчиком.

Страница

Многострочный ввод

Overlay

2 components

Tooltip

Легковесная подсказка при наведении.

Страница
Наведите на иконку

Popover

Плавающий слой контента, привязанный к триггеру.

Страница

Layout

4 components

Divider

Разделитель для визуальной группировки контента.

Страница
Верхняя секция
Нижняя секция

Resizable

Изменяемый размер контейнера с ручкой перетаскивания.

Страница

Потяните за правый нижний угол.

Sidebar

Составной sidebar с open/collapsed состояниями и вложенной навигацией.

Страница
Made by ME

ScrollArea

Кастомная область прокрутки на базе Bits UI.

Страница
Запись: Альфа
Запись: Бета
Запись: Гамма
Запись: Дельта
Запись: Эпсилон
Запись: Дзета
Запись: Эта
Запись: Тета

Feedback

3 components

Alert

Информирование пользователя о состоянии или ошибках.

Страница

Indicator

Малый акцентный маркер состояния.

Страница
Есть новое событие

Loader

Анимированная индикация фоновой загрузки.

Страница
Загрузка...
Загрузка...
Загрузка...

Typography

4 components

Description

Вспомогательный текст и пояснения к полям и блокам.

Страница

Базовый вспомогательный текст.

Ошибка: поле обязательно для заполнения.

Icon

Системный SVG-иконсет с размерами и единым API.

Страница

Label

Подписи для полей и управляющих элементов.

Страница

Title

Заголовочный блок с вариантами и adornments.

Страница

Секция интерфейса