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.
Позволяет растягивать текстовую область на максимально допустимую ширину.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea_width_available textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Ваш текст должен быть здесь"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Ваш текст должен быть здесь'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
Модификатор 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.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Ваш текст должен быть здесь"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Модификатор size
Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.
Способы использования: BEMJSON.
Необходимо использовать с модификатором theme в значении islands.
s
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_s textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Размер s"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Размер s'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Размер m"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Размер m'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_l textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Размер l"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Размер l'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_xl textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Размер xl"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Размер xl'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет уникальное имя блока.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' name="Обратная связь"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Обратная связь'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле val
Тип: String.
Определяет содержимое текстовой области.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' name="Feedback">Этот текст можно и нужно заменить</textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Feedback',
val: 'Этот текст можно и нужно заменить'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле placeholder
Тип: String.
Определяет текст подсказки.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' placeholder="Ваш текст должен быть здесь"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле id
Тип: String.
Определяет уникальный идентификатор текстовой области.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' id="Unique_1" placeholder="Ваш текст должен быть здесь"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь',
id: 'Unique_1'
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле tabIndex
Тип: Number.
Определяет последовательность перехода между контролами при нажатии на Tab.
Open in a new window<textarea class="textarea textarea_theme_islands textarea_size_m textarea__control i-bem" data-bem='{"textarea":{}}' tabindex="1" placeholder="Ваш текст должен быть здесь"></textarea>
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь',
tabIndex: 1
}
[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]