Yamato DaiwaFrontend (2.0.0-beta.4)
English
日本語
Русский

ValidatableControlShell

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

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

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

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

概要

Pugミクスイン
ValidatableControlShell--YDF
PugミクスインのLive template (IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)
オートコンプリート系
ValidatableControlShell--YDF
省略
vsc-ydf
Loading Placeholder
スタイル生成専用Stylusミクスイン
generateValidatableControlShellYDF_GUI_ComponentStyles
用意済みのテーマ
ValidatableControlShell__YDF.Themes.regular
標準（規定）
用意済みの幾何学的変形
ValidatableControlShell__YDF.GeometricVariations.regular
標準（規定）
ValidatableControlShell__YDF.GeometricVariations.small
小型
用意済みの修飾的変形
ValidatableControlShell__YDF.DecorativeVariations.regular
標準（規定）
ローディングプレースホルダ
無し

利用

マークアップ

プロジェクトへの取り組み

当GUIコンポーネントのマークアップは Pugミクスインの ValidatableControlShell--YDFに依り確保される。 取り組み方法は 通常 即ちComponents.pugと言うPugファイルの 含め 。 但し其の前Functionality.pugファイルも含めなければいけないが、ページのテンプレート の場合、Functionality.pugは含め済みで、 重複し含めてるとエラーが発生するのだ。

Pug混入のValidatableControlShell--YDF

ValidatableControlShell--YDF
(
1パラメーター目
必須
一般技術名
properties
日本語名
プロパティ揃い
型
Properties
2パラメーター目
任意
一般技術名
statesSimulations
日本語名
状態シミュレーション揃い
型
StatesSimulations
):void
ValidatableControlShell.propertiesSpecification
{
label
日本語名
キャプション
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
guidance
日本語名
説明文
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
required
日本語名
入力が必須か
型
boolean
undefinedの代替
false
nullは不可か
はい
mustDisplayAppropriateBadgeIfInputIsRequired
日本語名
入力が必須な時「必須」バッジの表示が要るか
型
boolean
undefinedの代替
false
nullは不可か
はい
mustDisplayAppropriateBadgeIfInputIsOptional
日本語名
入力が任意な時「任意」バッジの表示が要るか
型
boolean
undefinedの代替
false
nullは不可か
はい
mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge
日本語名
バッジ表示が不要な時、高さ調整の為見えないバッジの追加が要るきあ
型
boolean
undefinedの代替
false
nullは不可か
はい
coreElementHTML_ID
日本語名
入力要素のHTML識別子
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
labelElementHTML_ID
日本語名
キャプションのHTML識別子
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
mainSlotWrapperAdditionalCSS_Classes
日本語名
主要ストっとのCSSクラス一覧
型
指数配列
undefinedの代替
[]
nullは不可か
はい
undefined要素可否
はい
null要素可否
はい
配列の要素
型
string
最小文字数
1
theme
日本語名
テーマ
型
string
undefinedの代替
ValidatableControlShell__YDF.Themes.regular
nullは不可か
はい
利用可能な選択肢
  • ValidatableControlShell__YDF.Themes.regular
  • (`ValidatableControlShell__YDF.defineThemes(themesNames)`で定義された中から何れか)
areThemesCSS_ClassesCommon
日本語名
テーマCSSクラスは共通真偽
型
boolean
undefinedの代替
ValidatableControlShell__YDF.areThemesCSS_ClassesCommon
nullは不可か
はい
geometricVariation
日本語名
幾何学的変形
型
string
undefinedの代替
ValidatableControlShell__YDF.GeometricVariations.regular
nullは不可か
はい
利用可能な選択肢
  • ValidatableControlShell__YDF.GeometricVariations.regular
  • ValidatableControlShell__YDF.GeometricVariations.small
  • (`ValidatableControlShell__YDF.defineGeometricVariations(geometricVariationsNames)`で定義された中から何れか)
decorativeVariation
日本語名
修飾的変形
型
string
undefinedの代替
ValidatableControlShell__YDF.DecorativeVariations.regular
nullは不可か
はい
利用可能な選択肢
  • ValidatableControlShell__YDF.DecorativeVariations.regular
  • (`ValidatableControlShell__YDF.defineDecorativeVariations(decorativeVariationsNames)`で定義された中から何れか)
}
ValidatableControlShell.statesSimulations
{
validationErrorsMessages
日本語名
入力妥当性確認エラーメッセージ
型
多形性
undefinedの代替
false
nullは不可か
はい
選択肢
  • 型
    指数配列
    undefined要素可否
    はい
    null要素可否
    はい
    配列の要素
    型
    string
    最小文字数
    1
  • 型
    boolean
asynchronousValidationsStatuses
日本語名
入力非同期妥当性確認状態
型
多形性
undefinedの代替
false
nullは不可か
はい
選択肢
  • 型
    指数配列
    undefined要素可否
    はい
    null要素可否
    はい
    配列の要素
    型
    固定スキーマのオブジェクト
    スキーマ
    {
    ID
    型
    string
    undefinedは不可か
    はい
    nullは不可か
    はい
    利用可能な選択肢
    • IN_PROGRESS
    • FINISHED_AND_VALID
    • FINISHED_BUT_INVALID
    • MALFUNCTION
    message
    型
    string
    undefinedは不可か
    はい
    nullは不可か
    はい
    最小文字数
    1
    }
  • 型
    boolean
}

© 2023 Yamato Daiwa Co., Ltd.