TextBox (Blazor)

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

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

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

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

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

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

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

:hover

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

:focus

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

:readonly/:disabled

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

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

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

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

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

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

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

• Сводка
• Класс TextBox
  • Параметры Razor-компонента

Сводка

Класс компонента

TextBox

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

generateTextBoxYDF_GUI_ComponentStyles

Готовые темы

TextBox.StandardThemes.regular

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

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

TextBox.StandardGeometricVariations.regular

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

TextBox.StandardGeometricVariations.small

Компактная

TextBox.StandardGeometricVariations.labelLike

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

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

TextBox.GeometricModifiers.noRoundings

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

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

TextBox.StandardDecorativeVariations.regular

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

TextBox.StandardDecorativeVariations.labelLike

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

Loading placeholder

Недоступен

Класс TextBox

Параметры Razor-компонента