Skip to content

input.ru.md

Latest commit

 

History

History
360 lines (250 loc) · 10.5 KB

input.ru.md

File metadata and controls

360 lines (250 loc) · 10.5 KB

input

Используется для создания различных типов текстовых полей.

Обзор блока

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

Модификатор Допустимые значения Способы использования Описание
type 'password', 'search' BEMJSON Тип текстового поля.
width 'available' BEMJSON Максимально допустимая ширина текстового поля.
has-clear true 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 Подсказка в текстовом поле.
maxLength String Максимальное количество вводимых символов.
autocomplete Boolean Браузерное автозаполнение в текстовом поле.
id String Уникальный идентификатор текстового поля.
tabIndex Number Последовательность перехода между контролами при нажатии на Tab.

Описание блока

Блок input служит для создания различных типов текстовых полей.

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

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

Допустимые значения: 'password', 'search'.

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

Модификатор type используется для изменения типа текстового поля.

По умолчанию (если модификатор type не установлен) блок input является обычным полем ввода.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Введите имя'
}
Поле для ввода пароля (модификатор type в значении password)

Используется для создания поля для ввода пароля. Отличается от обычного тем, что все вводимые символы отображаются звездочками, точками или другими знаками в зависимости от используемого браузера.

{
    block : 'input',
    mods : { theme : 'islands', size: 'm', type : 'password' },
    placeholder : 'Введите пароль'
}
Поле для поиска (модификатор type в значении search)

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', type : 'search' },
    placeholder : 'Введите запрос'
}

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

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

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

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', width : 'available' },
    placeholder : 'Введите имя'
}

Модификатор has-clear

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

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

Добавляет крестик для очистки содержимого в текстовое поле.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', 'has-clear' : true },
    val : 'Привет!'
}

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

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

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

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', disabled : true },
    placeholder : 'Введите имя'
}

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

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

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

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

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm', focused : true },
    placeholder : 'Введите имя'
}

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

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

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

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

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

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

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

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

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

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

{
    block : 'input',
    mods : { theme : 'islands', size: 'm', type : 'search' },
    placeholder : 'Введите запрос'
}

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

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

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

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

Задает размер всем типам текстовых полей.

s

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

m

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

l

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

xl

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

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

Поле name

Тип: String.

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

{
    block : 'input',
    mods : { theme : 'islands', size: 'm' },
    name : 'Statistics'
}

Поле val

Тип данных: String.

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

{
    block : 'input',
    mods : { theme : 'islands', size: 'm' },
    name : 'Statistics',
    val : 'Привет!'
}

Поле placeholder

Тип данных: String.

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Введите имя'
}

Поле maxLength

Тип данных: Number.

Определяет максимальное количество вводимых символов.

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Введите имя',
    maxLength : 20
}

Поле autocomplete

Тип данных: Boolean.

Отвечает за включение / выключение автозаполнения текстового поля в браузере.

Если поле autocomplete не задано, автозаполнение включено.

Для отключения автозаполнения используйте значение false:

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Введите имя',
    autocomplete : false
}

Поле id

Тип данных: String.

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Введите имя',
    id : 'Unique_1'
}

Поле tabIndex

Тип данных: Number.

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

{
    block : 'input',
    mods : { theme : 'islands', size : 'm' },
    placeholder : 'Введите имя',
    tabIndex : 3
}