ValidatableControlShell

Input elements like a single-line text field (ValidatableControlShell(type="text")), a multi-line text input (textarea), a dropdown list (select) and so on are usually not used alone, but surrounded by auxiliary elements:

• Caption (usually a label element)
• Comment (for example, "dashes and brackets are optional" for a phone number input field)
• "Required" or "optional" labels
• Validation messages

According to one of the principles of quality design, all these surrounding elements should be made in a single style, so there is a need for a template component whose content will surround the input element. In YDF, such a component is ValidatableControlShell — literally, "the shell of a validatable component". As the name implies, this component is not independent, but must be part of other components, or more precisely, be a shell for them.

• ValidatableControlShell itself is not a validatable component, because it only displays the validation messages passed to it, but at the same time it does not validate anything itself, since validation is the task of the main component that ValidatableControlShell surrounds.
• When choosing the name, the word "wrapper" was avoided as it is much more polysemantic than "shell". Thus, in relation to user interface components, "wrapper" can mean not only literally wrapping the main component on both sides with its elements, but also extending the functionality of the main component.

• Overview
• Usage
  • Markup
    • Including to Project
    • Pug Mixin ValidatableControlShell--YDF

Overview

Pug mixin

ValidatableControlShell--YDF

Live templates of Pug Mixin (IntelliJ IDEA IDEs family official plugin)

Autocomplete-like

ValidatableControlShell--YDF

Abbreviation

vsc-ydf

Loading Placeholder

Stylus mixin for styles generating

generateValidatableControlShellYDF_GUI_ComponentStyles

Pre-made themes

ValidatableControlShell__YDF.Themes.regular

Regular (Default)

Pre-made geometric variations

ValidatableControlShell__YDF.GeometricVariations.regular

Regular (Default)

ValidatableControlShell__YDF.GeometricVariations.small

Small

Pre-made decorative variations

ValidatableControlShell__YDF.DecorativeVariations.regular

Regular (Default)

Loading placeholder

Unavailable

Usage

Markup

Including to Project

The markup of this GUI Component is been provided by the Pug mixin with name ValidatableControlShell--YDF. The including method is standard, by other words, the including of the Pug file Components.pug to your Pug file, herewith it is also required to include preliminary the Functionality.pug file (the last one already included to pages templates so if it include them one more time, the error will occur).

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

Pug Mixin ValidatableControlShell--YDF