attach
Используется для выбора файла, предназначенного для отправки на сервер.
Обзор блока
Модификаторы блока
Модификатор |
Допустимые значения |
Способы использования |
Описание |
disabled |
true |
BEMJSON , JS |
Неактивное состояние. |
focused |
true |
BEMJSON , JS |
Фокус на блоке. |
theme |
'islands' |
BEMJSON |
Стилевое оформление. |
size |
's' , 'm' , 'l' , 'xl' |
BEMJSON |
Размер блока. |
Специализированные поля блока
Поле |
Тип |
Описание |
name |
String |
Уникальное имя блока. |
button |
String , BEMJSON |
Содержимое кнопки для выбора файла. |
noFileText |
String |
Текст сообщения, когда файл не выбран. |
Описание блока
По умолчанию блок attach
визуально представлен:
- кнопкой (button), вызывающей системное окно загрузки файла;
- текстовым сообщением.
После выбора файла отображаются:
- имя файла (элемент
text
);
- крестик для отмены выбора (элемент
clear
).
Реализация блока не позволяет:
- прикреплять несколько файлов;
- перетаскивать элементы (drag-and-drop).
Модификаторы блока
Модификатор disabled
Допустимое значение: true
.
Способы использования: BEMJSON
, JS
.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<span class="attach attach_theme_islands attach_size_m attach_disabled i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button_disabled button__control i-bem" data-bem='{"button":{}}' role="button" aria-disabled="true"><input class="attach__control" type="file" disabled="disabled"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
Модификатор focused
Допустимое значение: true
.
Способы использования: BEMJSON
, JS
.
Отвечает за наличие фокуса на блоке.
Выставляется автоматически при получении блока фокуса.
{
block : 'attach',
mods : { theme : 'islands', size : 'm', focused : true },
button : 'Выберите файл',
noFileText : 'Файл не выбран'
}
Способ установки фокуса на блок определяет выбор модификатора: focused
или focused-hard
. Читать подробности.
Модификатор theme
Допустимое значение: 'islands'
.
Способ использования: BEMJSON
.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор size
Допустимое значение: 's'
, 'm'
, 'l'
, 'xl'
.
Способ использования: BEMJSON
.
Задает размер блоку.
Необходимо использовать с модификатором theme.
s
Open in a new window<span class="attach attach_theme_islands attach_size_s i-bem" data-bem='{"attach":{}}'><span class="button button_size_s button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 's'
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
m
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
l
Open in a new window<span class="attach attach_theme_islands attach_size_l i-bem" data-bem='{"attach":{}}'><span class="button button_size_l button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'l'
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
xl
Open in a new window<span class="attach attach_theme_islands attach_size_xl i-bem" data-bem='{"attach":{}}'><span class="button button_size_xl button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'xl'
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
Специализированные поля блока
Поле name
Тип: String
.
Определяет уникальное имя блока.
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file" name="attach-logo"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file"></span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
name: 'attach-logo',
button: 'Выберите файл'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле button
Тип: String
, BEMJSON
.
Определяет содержимое кнопки для выбора файла:
- задает текст кнопки (
String
)
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file"></span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Выберите файл'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
- задает внешний вид и тип кнопки (
BEMJSON
)
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="icon icon_action_download"></span>
<span
class="button__text">Выберите файл</span>
</span><span class="attach__no-file"></span></span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: {
block: 'button',
icon: {
block: 'icon',
mods: {
action: 'download'
}
},
text: 'Выберите файл'
}
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле noFileText
Тип: String
.
Определяет текст сообщения, когда файл не выбран.
Open in a new window<span class="attach attach_theme_islands attach_size_m i-bem" data-bem='{"attach":{}}'><span class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button"><input class="attach__control" type="file"><span class="button__text">Выберите файл</span></span>
<span
class="attach__no-file">Файл не выбран</span>
</span>
HTML{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
},
button: 'Выберите файл',
noFileText: 'Файл не выбран'
}
BEMJSON[
{
block: 'attach',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps