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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
},
placeholder: 'Ваш текст должен быть здесь'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
deps
Модификатор 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
},
placeholder: 'Размер s'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Размер m'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
},
placeholder: 'Размер l'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
},
placeholder: 'Размер xl'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
Специализированные поля блока
Поле 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Обратная связь'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
name: 'Feedback',
val: 'Этот текст можно и нужно заменить'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь',
id: 'Unique_1'
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
},
placeholder: 'Ваш текст должен быть здесь',
tabIndex: 1
}
BEMJSON[
{
block: 'textarea',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps