Описание компонента File Upload

Назначение компонента

Компонент File Upload (загрузка файлов) предоставляет интуитивно понятный интерфейс для выбора и загрузки файлов. Основные функции:

  • Загрузка файлов по клику
  • Отображение информации о выбранном файле
  • Индикатор прогресса загрузки
  • Возможность удаления выбранного файла

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

Компонент состоит из:

  1. Контейнера (.sf-file-upload-container)
  2. Стандартного поля загрузки (.sf-file-upload-standart)
  3. Блока отображения выбранного файла (.sf-file-upload-show)
  4. Элементов управления (иконки, кнопка удаления)
  5. Индикатора прогресса (.sf-progress-bar-container)

Классы и их назначение

Класс Назначение
.sf-file-upload-container Основной контейнер компонента
.sf-file-upload-standart Стандартное поле для выбора файлов
.sf-file-upload-show Блок отображения выбранного файла
.sf-file-upload--icon Иконка загрузки
.sf-file-upload--icon-delete Класс блока удаления файла
.sf-file-upload--file-name Поле для отображения имени файла
.sf-file-upload--file-size Поле для отображения размера файла
.sf-file-upload-link--blue Стилизованная ссылка для загрузки
.sf-progress-bar-container Контейнер индикатора прогресса
.sf-progress-bar Сам индикатор прогресса

Состояния компонента

1. Исходное состояние

  • Отображается поле для выбора файлов
  • Блок .sf-file-upload-show скрыт

2. После выбора файла

  • Основное поле скрывается
  • Показывается блок .sf-file-upload-show с информацией о файле
  • Отображается индикатор прогресса

Таблица CSS-переменных

Переменная Описание
--sf-outline Цвет границы контейнера
--sf-radius-1, --sf-radius-3 Радиусы скругления элементов
--sf-on-surface-variant Цвет текста
--sf-primary Основной цвет (для иконок и ссылок)
--sf-surface-2 Фон иконки загрузки
--sf-space-1, --sf-space-3 Отступы
--sf-text--size-3 Размер текста
--sf-text--height-1/2 Высота строки
--sf-d0 Размер иконки
cloud_upload
delete
50% 
            
<div class="sf-file-upload-container">
  <label class="sf-file-upload-standart">
    <input type="file" name="example">
    <div class="sf-file-upload--icon">
      <i class="sf-icon">cloud_upload</i>
    </div>
    <span>
      <span class="sf-file-upload-link--blue">Click to upload</span> or drag and drop
    </span>
    <span>
      SVG, PNG, JPG or GIF (max. 800x400px)
    </span>
  </label>
  
  <div class="sf-file-upload-show">
    <div class="sf-file-upload-show-icon-block">
      <div class="sf-file-upload--icon">
        <i class="sf-icon">cloud_upload</i>
      </div>
    </div>
    <div class="sf-file-upload-show-content-block">
      <div class="sf-file-upload-show-content-block-main">
        <div class="sf-file-upload-show-content-block-main--name">
          <span class="sf-file-upload--file-name"></span>
          <span class="sf-file-upload--file-size"></span>
        </div>
        <div class="sf-file-upload--icon-delete">
          <i class="sf-icon">delete</i>
        </div>
      </div>
      <div class="sf-progress-bar-container">
        <div class="sf-progress-bar" style="--width: 0"></div>
        <span class="sf-progress-bar-percent">50%</span>
      </div>
    </div>
  </div>
</div>

Изменить статью