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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm',
        disabled: true
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm',
            disabled: true
        }
    }
]

Модификатор `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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

Модификатор `size`

Допустимое значение: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Задает размер блоку.

Необходимо использовать с модификатором theme.

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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 's'
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 's'
        }
    }
]

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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'l'
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'l'
        }
    }
]

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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'xl'
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'xl'
        }
    }
]

Специализированные поля блока

Поле `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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    name: 'attach-logo',
    button: 'Выберите файл'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

Поле `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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    button: 'Выберите файл'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

задает внешний вид и тип кнопки (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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    button: {
        block: 'button',
        icon: {
            block: 'icon',
            mods: {
                action: 'download'
            }
        },
        text: 'Выберите файл'
    }
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

Поле `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>

{
    block: 'attach',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    button: 'Выберите файл',
    noFileText: 'Файл не выбран'
}

[
    {
        block: 'attach',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    }
]

attach

Instance methods:

clear

Block attach

Augments:control

Instance methods:

clear([data]):attach

description

Clear control value

parameters

data

Object

additional data

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

attach

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор `disabled`

Модификатор `focused`

Модификатор `theme`

Модификатор `size`

Специализированные поля блока

Поле `name`

Поле `button`

Поле `noFileText`

Block attach

Instance methods:

Отправить отзыв

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

attach

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор disabled

Модификатор focused

Модификатор theme

Модификатор size

Специализированные поля блока

Поле name

Поле button

Поле noFileText

Block attach

Instance methods:

Модификатор `disabled`

Модификатор `focused`

Модификатор `theme`

Модификатор `size`

Поле `name`

Поле `button`

Поле `noFileText`