Используется для создания текстовой области.
Модификатор | Допустимые значения | Способы использования | Описание |
---|---|---|---|
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
используется для создания области, в которую можно вводить несколько строк текста.
Допустимое значение: 'available'
.
Способы использования: BEMJSON
.
Позволяет растягивать текстовую область на максимально допустимую ширину.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm', width : 'available' },
placeholder : 'Ваш текст должен быть здесь'
}
Допустимое значение: true
.
Способы использования: BEMJSON
, JS
.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm', disabled : true },
placeholder : 'Ваш текст должен быть здесь'
}
Допустимое значение:true
.
Способы использования: BEMJSON
, JS
.
Выставляется автоматически при получении блоком фокуса.
Отвечает за наличие фокуса на блоке.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm', focused : true },
placeholder : 'Ваш текст должен быть здесь'
}
Примечание. Способ установки фокуса на блок определяет выбор модификатора:
focused
илиfocused-hard
. Подробнее.
Допустимое значение: true
.
Способы использования: —
.
Выставляется автоматически при наведении на блок курсором.
Допустимое значение:'islands'
.
Способы использования: BEMJSON
.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
{
block : 'textarea',
mods : { theme : 'islands', size: 'm' },
placeholder : 'Ваш текст должен быть здесь'
}
Допустимые значения для темы 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'
}
Тип: String
.
Определяет уникальное имя блока.
{
block : 'textarea',
mods : { theme : 'islands', size: 'm' },
name : 'Обратная связь'
}
Тип: String
.
Определяет содержимое текстовой области.
{
block : 'textarea',
mods : { theme : 'islands', size: 'm' },
name : 'Feedback',
val : 'Этот текст можно и нужно заменить'
}
Тип: String
.
Определяет текст подсказки.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm' },
placeholder : 'Ваш текст должен быть здесь'
}
Допустимое значение: false
.
Тип: Boolean
.
Отключает автозаполнение текстовой области введенным ранее текстом. По умолчанию автозаполнение включено и зависит от настроек браузера.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm' },
autocomplete : false
}
Тип: String
.
Определяет уникальный идентификатор текстовой области.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm' },
placeholder : 'Ваш текст должен быть здесь',
id : 'Unique_1'
}
Тип: Number
.
Определяет последовательность перехода между контролами при нажатии на Tab
.
{
block : 'textarea',
mods : { theme : 'islands', size : 'm' },
placeholder : 'Ваш текст должен быть здесь',
tabIndex : 1
}