Предпросмотр файла
Предпросмотр показывает выбранный или прикреплённый файл одной строкой:
иконку типа или миниатюру, имя, размер и действия с файлом. Берите его для
списков вложений и для файла, выбранного перед отправкой формы; ход загрузки
и повторную отправку показывает загрузка файлов .
Пример
description
Техническое задание.pdf
2,4 МБ
download delete
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-file-preview" >
<span class ="sf-file-preview-holder" ><i class ="sf-icon" aria-hidden ="true" >description</i ></span >
<span class ="sf-file-preview-main" >
<span class ="sf-file-preview-name" >Техническое задание.pdf</span >
<span class ="sf-file-preview-size" >2,4 МБ</span >
</span >
<span class ="sf-file-preview-actions" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Скачать: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >download</i ></button >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Удалить: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >delete</i ></button >
</span >
</div >
Разметка
Минимальную разметку показывает пример выше. Части sf-file-preview идут
в строку: держатель sf-file-preview-holder с иконкой sf-icon, основная
часть sf-file-preview-main с именем sf-file-preview-name и размером
sf-file-preview-size, затем действия sf-file-preview-actions.
Имя файла — видимый текст; длинное имя не выходит за строку.
Действия — нативные кнопки с иконкой
с доступным именем, в котором есть имя файла.
Блок действий необязателен: без него остаются держатель и имя.
У компонента нет своего JavaScript: удаление и скачивание выполняет
приложение.
Loader подключает CSS компонента вместе со Smart-компонентом
sf-file-preview, но не находит его по разметке sf-file-preview: без
Smart-компонента подключите component/file-preview/css/file-preview.css
сами.
Варианты
Миниатюра
В держателе стоит иконка типа файла или, для изображений, миниатюра
<img class="sf-file-preview-thumbnail">: она заполняет держатель с
обрезкой по краям.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 gap-3" >
<div class ="flex flex-col gap-1" >
<div class ="sf-file-preview" >
<span class ="sf-file-preview-holder" ><i class ="sf-icon" aria-hidden ="true" >description</i ></span >
<span class ="sf-file-preview-main" >
<span class ="sf-file-preview-name" >Техническое задание.pdf</span >
<span class ="sf-file-preview-size" >2,4 МБ</span >
</span >
<span class ="sf-file-preview-actions" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Скачать: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >download</i ></button >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Удалить: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >delete</i ></button >
</span >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-icon в sf-file-preview-holder</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-file-preview" >
<span class ="sf-file-preview-holder" ><img class ="sf-file-preview-thumbnail" src ="assets/photo.jpg" alt ="" ></span >
<span class ="sf-file-preview-main" >
<span class ="sf-file-preview-name" >Портрет.jpg</span >
<span class ="sf-file-preview-size" >190 КБ</span >
</span >
<span class ="sf-file-preview-actions" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Скачать: Портрет.jpg" ><i class ="sf-icon" aria-hidden ="true" >download</i ></button >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Удалить: Портрет.jpg" ><i class ="sf-icon" aria-hidden ="true" >delete</i ></button >
</span >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-file-preview-thumbnail</code >
</div >
</div >
Поверхность
Без модификатора строка прозрачна и встраивается в список или поле.
sf-file-preview--surface даёт ей собственную заливку и внутренний
отступ — для отдельного файла на странице.
description
Техническое задание.pdf
2,4 МБ
download delete
без модификатора
description
Техническое задание.pdf
2,4 МБ
download delete
sf-file-preview--surface
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 gap-3" >
<div class ="flex flex-col gap-1" >
<div class ="sf-file-preview" >
<span class ="sf-file-preview-holder" ><i class ="sf-icon" aria-hidden ="true" >description</i ></span >
<span class ="sf-file-preview-main" >
<span class ="sf-file-preview-name" >Техническое задание.pdf</span >
<span class ="sf-file-preview-size" >2,4 МБ</span >
</span >
<span class ="sf-file-preview-actions" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Скачать: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >download</i ></button >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Удалить: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >delete</i ></button >
</span >
</div >
<code class ="text-1/2 color-on-surface-variant" >без модификатора</code >
</div >
<div class ="flex flex-col gap-1" >
<div class ="sf-file-preview sf-file-preview--surface" >
<span class ="sf-file-preview-holder" ><i class ="sf-icon" aria-hidden ="true" >description</i ></span >
<span class ="sf-file-preview-main" >
<span class ="sf-file-preview-name" >Техническое задание.pdf</span >
<span class ="sf-file-preview-size" >2,4 МБ</span >
</span >
<span class ="sf-file-preview-actions" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Скачать: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >download</i ></button >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Удалить: Техническое задание.pdf" ><i class ="sf-icon" aria-hidden ="true" >delete</i ></button >
</span >
</div >
<code class ="text-1/2 color-on-surface-variant" >sf-file-preview--surface</code >
</div >
</div >
Состояния
Недоступен
Класс disabled или aria-disabled="true" приглушают всю строку. Кнопкам
действий дополнительно ставьте нативный disabled: класс на строке их не
блокирует.
image
Обложка проекта.jpg
860 КБ
download delete
HTML wrap_text Wrap source lines content_copy Copy
<div class ="sf-file-preview disabled" aria-disabled ="true" >
<span class ="sf-file-preview-holder" ><i class ="sf-icon" aria-hidden ="true" >image</i ></span >
<span class ="sf-file-preview-main" >
<span class ="sf-file-preview-name" >Обложка проекта.jpg</span >
<span class ="sf-file-preview-size" >860 КБ</span >
</span >
<span class ="sf-file-preview-actions" >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Скачать: Обложка проекта.jpg" disabled ><i class ="sf-icon" aria-hidden ="true" >download</i ></button >
<button type ="button" class ="sf-icon-button sf-icon-button--icon sf-icon-button--link sf-icon-button--on-surface sf-icon-button--size-1" aria-label ="Удалить: Обложка проекта.jpg" disabled ><i class ="sf-icon" aria-hidden ="true" >delete</i ></button >
</span >
</div >
Доступность
Доступное имя каждой кнопки называет действие и файл: «Удалить:
Отчёт.pdf».
Иконку типа скрывайте (aria-hidden="true"); миниатюре рядом с видимым
именем задайте alt="".
Список нескольких файлов размечайте списком <ul> с элементами <li>.
После удаления файла переведите фокус на соседний файл или на кнопку
выбора файлов и сообщите результат в области статуса.
В режиме высокой контрастности держатель и поверхность получают рамку
цвета текста.
Классы
Что
Классы
Блок
sf-file-preview
Части
sf-file-preview-actions, sf-file-preview-extension, sf-file-preview-holder, sf-file-preview-main, sf-file-preview-name, sf-file-preview-size, sf-file-preview-thumbnail
Модификаторы
sf-file-preview--compact, sf-file-preview--surface
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Переменные
Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента ). Значение по умолчанию — из базового правила блока (.sf-file-preview); переменную без него задают только модификаторы.
Переменная
По умолчанию
Задаёт
--sf-file-preview--background-colortransparentbackground-color
--sf-file-preview--gapvar(--sf-space-1/2)grid-gap, gap
--sf-file-preview--paddingvar(--sf-space-0)padding-top, padding-block-start, padding-bottom, padding-block-end, padding-inline-start, padding-inline-end
--sf-file-preview--radiusvar(--sf-radius--ui)border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
--sf-file-preview-holder--background-colorне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-holder: var(--sf-surface-container)
background-color
--sf-file-preview-holder--colorне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-holder: var(--sf-on-surface-variant)
color
--sf-file-preview-holder--radiusне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-holder: var(--sf-radius--ui)
border-radius
--sf-file-preview-holder--sizeне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-holder: var(--sf-ui-2--control-height)
width, inline-size, height, block-size
--sf-file-preview-name--colorне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-name: var(--sf-on-surface)
color
--sf-file-preview-name--font-familyне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-name: var(--sf-text--family)
font-family
--sf-file-preview-name--font-sizeне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-name: var(--sf-text-size-1)
font-size
--sf-file-preview-name--font-weightне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-name: var(--sf-font-weight-regular)
font-weight
--sf-file-preview-name--line-heightне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-name: var(--sf-text-height-1)
line-height
--sf-file-preview-size--colorне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-size: var(--sf-on-surface-variant)
color
--sf-file-preview-size--font-familyне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-size: var(--sf-text--family)
font-family
--sf-file-preview-size--font-sizeне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-size: var(--sf-text-size-1/2)
font-size
--sf-file-preview-size--font-weightне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-size: var(--sf-font-weight-regular)
font-weight
--sf-file-preview-size--line-heightне задана; задают модификаторы, например .sf-file-preview .sf-file-preview-size: var(--sf-text-height-1/2)
line-height
См. также
Предыдущая Содержимое и представление Следующая Аккордеон
