Определение

File (Файл) — это компонент, предназначенный для отображения информации о загруженных файлах. Он показывает имя файла, его тип, размер и предоставляет функции для управления файлами, такие как удаление или загрузка.

Функциональность

Отображает информацию о загружаемом файле, включая его имя, размер, тип и иконку. Это помогает пользователю легко идентифицировать загруженные файлы и убедиться, что они соответствуют требованиям перед загрузкой.

Предоставляет возможность удалять файлы из списка загруженных. Пользователь может легко удалить ненужный или неверно выбранный файл перед завершением загрузки, что обеспечивает удобство и контроль над процессом.

Компонент также может предоставлять возможность загрузки файла обратно на локальное устройство. Это позволяет пользователю скачать ранее загруженные файлы, например, для проверки или сохранения изменений, обеспечивая удобный доступ к данным прямо из интерфейса.

При загрузке файлов взаимодействует с Загрузчиком файлов (File Uploader), который обрабатывает процесс загрузки, включая выбор, отправку и отображение статуса файлов.

Дизайн и Стиль

Размер и Форма

Состоит из компонентов: семантическая иконка, Заголовок и подзаголовок (Title & subtitle) , Индикатор загрузки (Progress bar) и Кнопок (Button)

Компонент имеет 2 вида отображения:

• M — полноразмероное отображение загружаемого файла
• S — упрощенное отображение загружаемого файла

Имеет фиксированную высоту, но его ширина может увеличиваться в зависимости от контекста использования, однако не превышает 640px. Это позволяет компоненту адаптироваться к разным макетам, сохраняя удобство взаимодействия и эстетичный внешний вид, независимо от ширины экрана.

Цвет и Контраст

Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Варианты

Состояние загрузки

Используется по умолчанию при загрузке файла

Несколько файлов

Если загружается более 3 файлов, можно использовать миниатюрный вариант отображения файлов, чтобы вместить их все на экране. Это помогает сэкономить пространство и позволяет пользователю видеть все загруженные файлы, не теряя общей ясности интерфейса.

Длинное наименование файлов

Если название файла не умещается в отведённую область отображения, формат файла остаётся видимым (программно). Это обеспечивает, что информация о типе файла всегда доступна, даже если название слишком длинное, что помогает пользователю быстро идентифицировать файл.

Скриншот вместо иконки

В зависимости от требований системы может потребоваться отображение скриншота, например, при отправке сообщения в техподдержку с отображением ошибки или при загрузке изображения. Для этого через настройки Leading можно заменить стандартное отображение на компонент Slot, в который вставляется изображение. Это позволяет гибко адаптировать интерфейс под различные сценарии, такие как визуальное подтверждение или иллюстрация проблемы.

Параметры

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

В упрощенном варианте файла иконки по умолчанию нет

Состояния

Анатомия

Для понимания анатомии входящих компонентов смотри примеры Заголовок и подзаголовок (Title&Subtitle), Индикатор загрузки (Progress Bar), Спиннер (Spinner), Кнопка (Button)