Загрузчик файлов

Предоставляет возможность пользователю загружать файлы на сервер.

Используется

  • Для загрузки пользовательских файлов на сервер

Строение компонента

Строение компонента

  1. Лейбл
  2. Вспомогательное описание
  3. Кнопка загрузки
  4. Иконка
  5. Наименование файлов
  6. Кнопка очистки загруженного файла
Лейбл

Всегда используйте лейбл для описания поля. Не дублируйте лейбл во вспомогательном тексте.

Вспомогательное описание

Предоставляет дополнительную информацию о компоненте, если информации в лейбле недостаточно. Всегда начинается с глагола. 

Кнопка загрузки

Загружает выбранные пользователем файлы на сервер. Стандартный текст: «Загрузите файл». Если вы предоставляете возможность загрузить несколько файлов, дополнительно укажите это в тексте кнопки: «Загрузите файлы». Кнопка загрузки это обязательный элемент.

Иконка

Статус файла.

Кнопка очистки загруженного файла

Удаляет загруженный файл.

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

Список файлов, готовых к отправке на сервер.

Встроенные компоненты

Цвета

Размеры

Размеры

Типографика

Поведение

Поведение

  • Всегда должен использоваться вместе с primary кнопкой подтверждения «Отправить» или «Загрузить».
  • Вариацию кнопки загрузки можно менять, по умолчанию используется secondary.
  • После загрузки файла, кнопка не исчезает.
  • Если можно загрузить только один файл, то при повторной загрузке файла, загруженный ранее файл удаляется.

Состояния

Связанные компоненты

Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3