Button
Основное действие интерфейса в текстовом и иконочном режимах.
D3S1GN42 UI Kit
Витрина компонентов дизайн-системы
Главная страница показывает все текущие Svelte-компоненты и ведет на отдельные страницы каждого компонента. Storybook синхронизирован с этими же демо-сценариями.
Действия
Страница
Ввод данных
Calendar
Календарный слой для выбора одной даты, периода и событийных сценариев.
Одна дата
| пн | вт | ср | чт | пт | сб | вс |
|---|---|---|---|---|---|---|
| 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 |
Период с занятыми днями
| пн | вт | ср | чт | пт | сб | вс |
|---|---|---|---|---|---|---|
| 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 |
| пн | вт | ср | чт | пт | сб | вс |
|---|---|---|---|---|---|---|
| 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
Поле даты с выпадающим календарём и режимами одной даты или периода.
Дата
01011984
Дата
01011984
07011984
Checkbox
Двоичный выбор для форм и настроек.
ColorPicker
Компактный выбор цвета через swatch, popover, HEX и пресеты.
Статус Согласование
Согласование #EE6D27CC
Акцент Карточка проекта
Новая задача Запуск витрины
Swatch Быстрый выбор
DragList
Перестановка элементов списком через перетаскивание.
1. Первый блок
2. Второй блок
3. Третий блок
Input
Универсальное текстовое поле с подписью, очисткой и счетчиком.
NumberInput
Числовое поле в том же визуальном каркасе, что и Input.
Select
Выпадающий список для выбора одного или нескольких значений.
Выбрано: В работе
Выбрано несколько: Бэклог, Готово
RadioGroup
Выбор одного значения из набора опций.
Switch
Переключатель включено/выключено для быстрых настроек.
Tag
Метка с подписью, выбираемым состоянием, удалением и несколькими размерами.
обычный
Контент
выбираемый
маркер
Импорт черновик
малый
Короткий
крупный
Портал
Textarea
Многострочное поле с изменяемым размером, очисткой и счетчиком.
Слои
Drawer
Выдвижная мобильная панель на Vaul Svelte для фильтров, форм и действий.
Tooltip
Легковесная подсказка при наведении.
Наведите на иконку
Modal
Модальное окно на базе Bits UI Dialog с шапкой, содержимым, футером и закрытием.
Popover
Плавающий слой контента, привязанный к триггеру.
Макет
Divider
Разделитель для визуальной группировки контента.
Верхняя секция
Нижняя секция
Pagination
Навигация по страницам с быстрым переходом к номеру страницы.
PageHeader
Шапка рабочей страницы с заголовком, возвратом, центральным блоком и действиями.
Resizable
Изменяемый размер контейнера с ручкой перетаскивания.
Потяните за правый нижний угол.
Sidebar
Составная боковая панель с раскрытым, свернутым состояниями и вложенной навигацией.
ScrollArea
Кастомная область прокрутки на базе Bits UI.
Tabs
Составные вкладки на базе Bits UI для переключения связанных панелей контента.
База знаний Регламент онбординга
Статус Опубликовано
Владелец HR Ops
Следующая проверка 12 июн
- Сегодня Добавлен блок про доступы в CRM
- Вчера Обновлен чек-лист первого дня
- 21 мая Архивирована старая версия гайда
Чтение Вся команда
Редактирование 3 группы
Модерация 2 владельца
428 просмотров
37 переходов
94% полезность
Table
Универсальная таблица с сортировкой, итоговыми строками и выделением.
Обратная связь
Alert
Информирование пользователя о состоянии или ошибках.
Стандартное информационное сообщение.
EmptyState
Пустые, ошибочные и итоговые состояния для списков, таблиц и рабочих экранов.
Поиск
Ничего не найдено
По текущим фильтрам нет материалов. Можно изменить запрос или сбросить параметры отбора.
Wiki
Истории изменений пока нет
Когда статья будет отредактирована, здесь появятся версии, авторы и комментарии к правкам.
Загрузка
Не удалось получить данные
Сервер не ответил вовремя. Попробуйте обновить блок через несколько секунд.
Нет доступа
Запросите права у владельца раздела.
Готово
Изменения сохранены и доступны команде.
Черновик пуст
Добавьте первый блок содержания.
Graph
Карточка графика на Chart.js с заголовком, областной линией и настраиваемой осью.
Выручка
| Период | Значение |
|---|---|
| ПН | ПН: 120 |
| ВТ | ВТ: 260 |
| СР | СР: 210 |
| ЧТ | ЧТ: 390 |
| ПТ | ПТ: 340 |
| СБ | СБ: 470 |
| ВС | ВС: 420 |
| Период | Значение |
|---|---|
| 1 апр | 1 апр: $90 |
| 5 апр | 5 апр: $140 |
| 10 апр | 10 апр: $110 |
| 15 апр | 15 апр: $520 |
| 20 апр | 20 апр: $180 |
| 25 апр | 25 апр: $760 |
| 30 апр | 30 апр: $610 |
Toast
Всплывающие уведомления поверх интерфейса без сдвига разметки.
Indicator
Малый акцентный маркер состояния.
Есть новое событие
Loader
Анимированная индикация фоновой загрузки.
Загрузка...
Загрузка...
Загрузка...
Skeleton
Плейсхолдеры загрузки: примитивы и готовые каркасы для разных экранов.
Wiki Статья с мета-информацией
Загрузка статьи
Лента История изменений
Загрузка истории изменений
Форма Редактирование
Загрузка формы
Данные Таблица и быстрые состояния
Загрузка таблицы
Примитивы Ручная сборка каркаса
Загрузка панели
Типографика
Description
Вспомогательный текст и пояснения к полям и блокам.
Базовый вспомогательный текст.
Ошибка: поле обязательно для заполнения.
Icon
Системный SVG-иконсет с размерами и единым API.
Label
Подписи для полей и управляющих элементов.
Title
Заголовочный блок с вариантами и дополнительными элементами.