ValidatableControlShell (Vue)

Такие элементы ввода, как однострочное текстовое поле (ValidatableControlShell(type="text")), многострочное текстовое ввода (textarea), выпадающие список (select) и так далее обычно употребляются не по одиночке, в окружении вспомогательных элементов:

• Заголовочная надпись (обычно элемент label)
• Комментарий (например, «тире и скобки можно необязательны» для поля ввода номера телефона)
• Метки «обязательное» или «необязательное»
• Сообщения валидации

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

• Сам ValidatableControlShell не является валидируемым компонентом, поскольку он лишь отображает переданные ему сообщения валидации, но при этом сам ничего не валидирует, так как валидация — задача основного компонента, который ValidatableControlShell окружает.
• При выборе названия избегалось слово «обёртка» («wrapper»), так как оно гораздо более многозначное, чем «оболочка». Так, по отношению к компонентам пользовательского интерфейса «обёртка» может означать не только буквальное обёртывание основного компонента с обеих сторон своими элементами, но и расширение функциональности основного компонента.

• Краткий обзор
• Класс ValidatableControlShellClass
  • Vue-свойства

Краткий обзор

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

ValidatableControlShell

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

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

Pug-синтаксис

ValidatableControlShell--YDF-Vue-Pug

HTML-синтаксис

ValidatableControlShell--YDF-Vue-HTML

Сокращённый

Pug-синтаксис

vsc-ydf-vue-pug

HTML-синтаксис

vsc-ydf-vue-html

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

generateValidatableControlShellYDF_GUI_ComponentStyles

Готовые темы

ValidatableControlShell.Themes.regular

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

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

ValidatableControlShell.GeometricVariations.regular

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

ValidatableControlShell.GeometricVariations.small

Компактная

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

ValidatableControlShell.DecorativeVariations.regular

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

Loading placeholder

Недоступен

Класс ValidatableControlShellClass

Vue-свойства