ValidatableControlShell (Vue)

単一行テキストフィールド（ValidatableControlShell(type="text")）、 複数行テキスト入力（textarea）、ドロップダウンリスト （select）などの入力要素は、通常は単独で使用されず、 次のような補助的な要素に囲まれます。

• キャプション（通常は label 要素）
• 注釈（例：電話番号入力フィールドの「ハイフンと括弧は任意です」など）
• 「必須」または「任意」のラベル
• バリデーションメッセージ

質の高いデザインの原則の一つによれば、これらすべての周囲の要素は統一されたスタイルで 作成されるべきであるため、入力要素を囲む内容を持つテンプレート コンポーネントの 必要性が生じます。 YDF では、そのようなコンポーネントは ValidatableControlShell （直訳すると「バリデーション可能なコンポーネントのシェル」）です。 その名前が示すように、このコンポーネントは独立したものではなく、 他のコンポーネントの一部である必要があり、より正確にはそれらのためのシェルとなります。

• ValidatableControlShell 自体は バリデーション可能なコンポーネントではありません。なぜなら、渡されたバリデーションメッセージを表示するだけであり、 それ自体は何らバリデーションを行わないからです。バリデーションは、 ValidatableControlShell が囲んでいるメインコンポーネントの役割です。
• 名前の選択において、「wrapper」という言葉は「shell」よりもはるかに多義的であるため避けられました。 そのため、ユーザーインターフェースコンポーネントに関して、「wrapper」は単にメインコンポーネントの両側を その要素で文字通り包むことだけでなく、メインコンポーネントの機能を拡張することも意味する場合があります。

• 概要
• ValidatableControlShellClassクラス
  • Vueプロパティ

概要

コンポーネントのクラス

ValidatableControlShell

VueコンポーネントのLive template (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

標準（規定）

ローディングプレースホルダ

無し

ValidatableControlShellClassクラス

Vueプロパティ