textarea.ru.md

textarea

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

Обзор блока

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

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

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

Поле	Тип	Описание
name	String	Имя текстовой области.
val	String, Number	Содержимое текстовой области.
placeholder	String	Подсказка в текстовой области.
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. Читать подробности.

Модификатор 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 : 'Ваш текст должен быть здесь'
}

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