Компоненты

Готовые элементы интерфейса SIMAI Framework. Выберите задачу и откройте страницу нужного компонента. Правила выбора и переноса примеров находятся в руководстве.

Действия

Все компоненты раздела «Действия»

• Кнопки — Основные, вторичные и текстовые действия разных размеров и состояний.
• Группа кнопок — Связанная группа действий или вариантов выбора.
• Кнопки с иконкой — Компактные действия без видимой текстовой подписи.
• Плавающая кнопка — Главное контекстное действие поверх содержимого.
• Закрытие — Стандартная кнопка закрытия панели, окна или уведомления.
• Копирование — Копирование значения в буфер обмена с понятной обратной связью.
• Скачивание файла — Действие скачивания с информацией о файле.

Формы и ввод

Все компоненты раздела «Формы и ввод»

• Текстовые поля — Однострочный ввод, подписи, подсказки и состояния проверки.

• Многострочное поле — Ввод длинного свободного текста.

• Флажок — Независимый выбор одного или нескольких значений.

• Переключатель radio — Выбор одного значения из небольшой группы.

• Switch — Немедленное включение или выключение настройки.

• Toggle — Компактное переключение состояния или режима.

• Количество — Точное числовое значение с кнопками увеличения и уменьшения.

• Диапазон — Выбор границ числового диапазона.

• Слайдер — Приблизительный выбор одного значения на шкале.

• Выбор даты — Ввод и выбор даты в календаре.

• Код страны — Выбор телефонного кода страны.

• Загрузка файла — Выбор и отправка одного или нескольких файлов.

• Код подтверждения — Ввод одноразового кода по отдельным позициям.

Навигация и процесс

Все компоненты раздела «Навигация и процесс»

• Ссылка — Текстовый переход, в том числе с иконкой и недоступным состоянием.
• Хлебные крошки — Путь пользователя в иерархии сайта или приложения.
• Меню — Список навигационных ссылок и действий.
• Пагинация — Переход между частями длинного списка.
• Вкладки — Переключение между связанными разделами содержимого.
• Вкладка — Отдельный элемент навигации внутри набора вкладок.
• Выпадающий список — Выбор значения или действия из скрытого списка.
• Контекстное меню — Действия, связанные с выбранным объектом или областью.
• Дерево — Навигация по вложенной иерархии.
• Элемент дерева — Отдельный узел иерархической навигации.
• Шаги — Последовательность этапов и текущий прогресс пользователя.

Обратная связь и состояние

Все компоненты раздела «Обратная связь и состояние»

• Уведомления — Важное сообщение внутри текущего контекста.
• Toast — Краткая неблокирующая обратная связь о результате действия.
• Бейджи — Короткий статус, категория или счётчик рядом с объектом.
• Точка состояния — Минимальный визуальный индикатор состояния.
• Прогресс — Ход операции с известной степенью завершения.
• Шкала прогресса — Прогресс, разделённый на наглядные участки.
• Спиннер — Ожидание операции с неизвестной длительностью.
• Скелетон — Стабильная форма содержимого во время загрузки данных.
• Заполнитель — Пустое состояние или временная область содержимого.

Содержимое и представление

Все компоненты раздела «Содержимое и представление»

• Предпросмотр файла — Имя, размер и действия для выбранного или прикреплённого файла.
• Аккордеон — Сворачиваемые разделы связанного содержимого.
• Аватары — Изображение или инициалы человека и группы людей.
• Разделитель — Смысловое разделение соседних частей содержимого.
• Документ — Представление документа или связанного материала.
• Подсветка — Выделение важного фрагмента текста или кода.
• Иконки — Системные символы действий, объектов и состояний.
• Emoji — Компактный эмоциональный или смысловой символ.
• Флаг — Флаг страны картинкой, в прямоугольнике или круге.
• Клавиши — Обозначение клавиши или сочетания клавиш.
• Акцентная иконка — Крупный тематический символ для карточки или сообщения.
• Теги — Категории и выбранные значения в компактной форме.
• Справочная ссылка — Ссылка на дополнительное объяснение или источник.

Слои и медиаконтент

Все компоненты раздела «Слои и медиаконтент»

• Модальное окно — Фокусированная задача в отдельном слое поверх страницы.
• Подсказка — Короткое пояснение элемента при фокусе или наведении.
• Карусель — Последовательный просмотр нескольких материалов.
• Swiper — Сенсорное перелистывание карточек и медиаконтента.

Системные и расширенные

Все компоненты раздела «Системные и расширенные»

• Полоса прокрутки — Единое оформление прокручиваемой области.
• Показ и скрытие — Управляемое раскрытие и скрытие содержимого.
• Оглавление — Навигация по заголовкам текущей длинной страницы.
• Тема — Переключение и применение цветовой темы интерфейса.

Технические контракты

Все компоненты раздела «Технические контракты»

• Основа Admin Menu — Низкоуровневый визуальный контракт для разработчиков Framework. Пользовательский сценарий документирован только как Smart Admin Menu.