Skip to content

Files

Latest commit

5a55847 · Aug 21, 2017

History

History
274 lines (188 loc) · 7.39 KB

textarea.ru.md

File metadata and controls

274 lines (188 loc) · 7.39 KB

textarea

Используется для создания текстовой области.

Обзор

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

Модификатор Допустимые значения Способы использования Описание
width 'available' BEMJSON Максимально допустимая ширина текстовой области.
disabled true BEMJSON, JS Неактивное состояние.
focused true BEMJSON, JS Фокус на блоке.
hovered true Наведение курсором.
theme 'islands' BEMJSON Стилевое оформление.
size 's', 'm', 'l', 'xl' BEMJSON Размер текстовой области. Используется только с модификатором theme в значении islands.

Поля блока

Поле Тип Описание
name String Имя текстовой области.
val String, Number Содержимое текстовой области.
placeholder String Подсказка в текстовой области.
autocomplete Boolean Отключение автозаполнения текстовой области.
id String Уникальный идентификатор текстовой области.
tabIndex Number Последовательность перехода между контролами при нажатии на Tab.

Описание

Блок textarea используется для создания области, в которую можно вводить несколько строк текста.

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

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

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

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

Позволяет растягивать текстовую область на максимально допустимую ширину.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm', width : 'available' },
    placeholder : 'Ваш текст должен быть здесь'
}

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

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

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

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

 {
     block : 'textarea',
    mods : { theme : 'islands', size : 'm', disabled : true },
    placeholder : 'Ваш текст должен быть здесь'
 }

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

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

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

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

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

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm', focused : true },
    placeholder : 'Ваш текст должен быть здесь'
}

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

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

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

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

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

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

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

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

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

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

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    placeholder : 'Ваш текст должен быть здесь'
}

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

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

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

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

s

{
    block : 'textarea',
    mods : { theme : 'islands', size: 's' },
    placeholder : 'Размер s'
}

m

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    placeholder : 'Размер m'
}

l

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'l' },
    placeholder : 'Размер l'
}

xl

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'xl' },
    placeholder : 'Размер xl'
}

Поля блока

Поле name

Тип: String.

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

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    name : 'Обратная связь'
}

Поле val

Тип: String.

Определяет содержимое текстовой области.

{
    block : 'textarea',
    mods : { theme : 'islands', size: 'm' },
    name : 'Feedback',
    val : 'Этот текст можно и нужно заменить'
}

Поле placeholder

Тип: String.

Определяет текст подсказки.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Ваш текст должен быть здесь'
}

Поле autocomplete

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

Тип: Boolean.

Отключает автозаполнение текстовой области введенным ранее текстом. По умолчанию автозаполнение включено и зависит от настроек браузера.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    autocomplete : false
}

Поле id

Тип: String.

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

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Ваш текст должен быть здесь',
    id : 'Unique_1'
}

Поле tabIndex

Тип: Number.

Определяет последовательность перехода между контролами при нажатии на Tab.

{
    block : 'textarea',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Ваш текст должен быть здесь',
    tabIndex : 1
}