Skip to content

Latest commit

 

History

History
231 lines (163 loc) · 6.24 KB

attach.ru.md

File metadata and controls

231 lines (163 loc) · 6.24 KB
Raw

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.

Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.

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

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

Допустимое значение: true.

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

Отвечает за наличие фокуса на блоке.

Выставляется автоматически при получении блока фокуса.

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

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

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

Допустимое значение: 'islands'.

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

Отвечает за стилевое оформление блока.

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

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

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

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

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

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

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

s

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

m

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

l

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

xl

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

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

Поле name

Тип: String.

Определяет уникальное имя блока.

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

Поле button

Тип: String, BEMJSON.

Определяет содержимое кнопки для выбора файла:

  • задает текст кнопки (String)
{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : 'Выберите файл'
}
  • задает внешний вид и тип кнопки (BEMJSON)
{
    block : 'attach',
    mods : { theme : 'islands', size : 'm' },
    button : {
        block : 'button',
        icon : {
            block : 'icon',
            mods : { action : 'download' }
        },
        text: 'Выберите файл'
    }
}

Поле noFileText

Тип: String.

Определяет текст сообщения, когда файл не выбран.

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