TextBox

Наряду с компонентом «кнопка» (Button), текстовое поле является одним из самых базовых и популярных компонентов графического пользовательского интерфейса. Речь идёт о вводе текста без форматирования (такого как выделение жирным или курсивом), а текстовый редактор с поддержкой форматирования текста — это отдельный и довольно сложный тема. Но несмотря на отсутствие форматирования, есть много данных, которые принимаются от пользователя через данный компонент: имена, адреса, всевозможные названия. Более того под «текстом» подразумевается не только набор завершённых предложений, но и любая информация, которая может быть представлена в виде последовательности символов:

• Адреса электронной почты
• Пароли
• Ссылки

Кроме того, данный компонент иногда применяется и для ввода числовых данных, правда зачастую это не числа, а последовательности цифр иногда вперемешку в вспомогательными символами:

• Телефонные номера
• Почтовые индексы
• Номера кредитных карт

В большинстве случаев, данный компонент не предусматривает перенос строки, а при вводе большого количества символов отображается лишь часть из них, хотя с помощью клавиш по стрелками возможна прокрутка. Однако в случаях, когда от пользователя требуется ввести именно завершенные предложения (может даже абзацы), требуется возможность переноса строки, что иногда может рассматриваться как простое форматирование текста. С точки зрения HTML, для многострочного текста используется отдельный вид элемента (причём автоматической регулировки высоты изначально не предусмотрено), однако в YDF для поддержки многострочного режима нужно лишь указать соответствующую опцию, и автоматическая регулировка высоты также доступна.

Как и в случае с кнопками, простота текстового поле обманчива. Во-первых, текстовое поле ввода — это валидируемый компонент, а потому вся сложность задачи валидации вводимых данных имеет к нему прямое отношение. В YDF текстовое поле ввода, как и другие компоненты, обёрнутые в компонент ValidatableControlShell включает в себя опциональные вспомогательные элементы, такие как надпись, комментарий, список ошибок валидации и так далее, хотя с точки зрения HTML это всё отдельные элементы.

У текстового поля ввода много состояний. Визуально различимы должны быть как минимум:

:hover

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

:focus

Активируется, когда текстовое поле приняло фокус, то есть ввод с клавиатуры будет приниматься внутрь данного текстового поля.

:readonly/:disabled

Активно, когда поле ввода доступно только для чтения. Данная функциональность не такая редкая, как кажется, потому что во многих приложениях есть режим просмотра и режим редактирования.

Невалидное состояние

Активно, когда введённое значение не является валидным, а также если при этом активен режим отображения валидности состояния. Если поле ввода изначально пустое, при этом обязательно для ввода, то пустой значение невалидно изначально, однако перед тем подсвечивать поле красным и сообщать ещё ничего не сделавшему пользователю об ошибках валидации, следует дать пользователю заполнить это поле, и только когда он уберёт фокус из поля ввода, можно активировать режим отображения валидности состояния. Заметим, что такой концепции с точки зрения HTML/CSS нет, а потому если определить валидацию через HTML-атрибуты наподобие required и minlength и стили для псевдокласса :invalid, то эти стили будут применяться вне зависимости от того, начал ли пользователь вводить данные в пустые поля или ещё нет.

Более того, часть этих состояний может возникать одновременно. Например состоянии hover может возникнуть одновременно с focus, причём оба этих состояния могут возникнуть поверх invalid. Тут возникает вопрос о приоритете стилей.

Также, на практике для поле ввода востребована следующая дополнительная функциональность:

• Иконки, которые в зависимости от дизайна могут быть как слева, так и справа
• Кнопка отображения/сокрытия пароля
• Кнопка копирования введённого значения

Вся эта функциональность доступна в компоненте TextBox.

• Обзор
• Использование
  • Разметка
    • Подключение в проект
    • Pug-примесь TextBox--YDF

Обзор

Pug-примесь

TextBox--YDF

Live template-ы Pug-примеси (официальный плагин для семейства сред разработки IntelliJ IDEA)

Наподобие автодополнения

TextBox--YDF

Сокращённый

tb-ydf

Loading Placeholder

Stylus-примесь для генерации стилей

generateTextBoxYDF_GUI_ComponentStyles

Готовые темы

TextBox__YDF.Themes.regular

Базовая (по умолчанию)

Готовые геометрические вариации

TextBox__YDF.GeometricVariations.regular

Базовая (по умолчанию)

TextBox__YDF.GeometricVariations.small

Компактная

TextBox__YDF.GeometricVariations.labelLike

Похожая на обычную надпись

Геометрические модификаторы

TextBox__YDF.GeometricModifiers.noRoundings

Отсутствие скруглений

Готовые декоративные вариации

TextBox__YDF.DecorativeVariations.regular

Базовая (по умолчанию)

TextBox__YDF.DecorativeVariations.labelLike

Похожая на обычную надпись

Loading placeholder

Недоступен

Использование

Разметка

Подключение в проект

Разметка данного GUI-компонента поставляется в виде Pug-примеси TextBox--YDF. Способ подключения — стандартный: путём включения Pug-файла Components.pug в Ваш pug-файл, при этом туда же предварительно должен быть включён файл Functionality.pug (последний уже входит в шаблоны страниц , повторное включение приведёт к ошибке).

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug

Pug-примесь TextBox--YDF