ValidatableControlShell (Blazor)
ページが準備中
恐れ入りますが、現在此のページは未完成の状態です。
単一行テキストフィールド(ValidatableControlShell(type="text"))、 複数行テキスト入力(textarea)、ドロップダウンリスト (select)などの入力要素は、通常は単独で使用されず、 次のような補助的な要素に囲まれます。
- キャプション(通常は
label要素) - 注釈(例:電話番号入力フィールドの「ハイフンと括弧は任意です」など)
- 「必須」または「任意」のラベル
- バリデーションメッセージ
質の高いデザインの原則の一つによれば、これらすべての周囲の要素は統一されたスタイルで 作成されるべきであるため、入力要素を囲む内容を持つテンプレート コンポーネントの 必要性が生じます。 YDF では、そのようなコンポーネントは ValidatableControlShell (直訳すると「バリデーション可能なコンポーネントのシェル」)です。 その名前が示すように、このコンポーネントは独立したものではなく、 他のコンポーネントの一部である必要があり、より正確にはそれらのためのシェルとなります。
ValidatableControlShell自体は バリデーション可能なコンポーネントではありません。なぜなら、渡されたバリデーションメッセージを表示するだけであり、 それ自体は何らバリデーションを行わないからです。バリデーションは、ValidatableControlShellが囲んでいるメインコンポーネントの役割です。- 名前の選択において、「wrapper」という言葉は「shell」よりもはるかに多義的であるため避けられました。 そのため、ユーザーインターフェースコンポーネントに関して、「wrapper」は単にメインコンポーネントの両側を その要素で文字通り包むことだけでなく、メインコンポーネントの機能を拡張することも意味する場合があります。
概要
- コンポーネントのクラス
ValidatableControlShell- スタイル生成専用Stylusミクスイン
generateValidatableControlShellYDF_GUI_ComponentStyles- 用意済みのテーマ
ValidatableControlShell.StandardThemes.regular- 標準(規定)
- 用意済みの幾何学的変形
ValidatableControlShell.StandardGeometricVariations.regular- 標準(規定)
ValidatableControlShell.StandardGeometricVariations.small- 小型
- 用意済みの修飾的変形
ValidatableControlShell.StandardDecorativeVariations.regular- 標準(規定)
- ローディングプレースホルダ
- 無し
ValidatableControlShellClassクラス
Razorコンポーネントの引数
ValidatableControlShell.Properties
{
- label
- 日本語名
- キャプション
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- guidance
- 日本語名
- 説明文
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- required
- 日本語名
- 入力が必須か
- 型
- boolean
- 規定値
- false
- mustDisplayAppropriateBadgeIfInputIsRequired
- 日本語名
- 入力が必須な時「必須」バッジの表示が要るか
- 型
- boolean
- 規定値
- false
- mustDisplayAppropriateBadgeIfInputIsOptional
- 日本語名
- 入力が任意な時「任意」バッジの表示が要るか
- 型
- boolean
- 規定値
- false
- mustAddInvisibleBadgeForHeightEqualizingWhenNoBadge
- 日本語名
- バッジ表示が不要な時、高さ調整の為見えないバッジの追加が要るきあ
- 型
- boolean
- 規定値
- false
- coreElementHTML_ID
- 日本語名
- 入力要素のHTML識別子
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- labelElementHTML_ID
- 日本語名
- キャプションのHTML識別子
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- mainSlotWrapperAdditionalCSS_Classes
- 日本語名
- 主要ストっとのCSSクラス一覧
- 型
- 指数配列
- 規定値
- []
- undefined要素可否
- はい
- null要素可否
- はい
- 配列の要素
- 型
- string
- 最小文字数
- 1
- theme
- 日本語名
- テーマ
- 型
- string
- 規定値
- ValidatableControlShell.StandardThemes.regular
- 利用可能な選択肢
- ValidatableControlShell.StandardThemes.regular
- (`ValidatableControlShell.defineCustomThemes(CustomThemesEnumeration)`で定義された中から何れか)
- areThemesCSS_ClassesCommon
- 日本語名
- テーマCSSクラスは共通真偽
- 型
- boolean
- 規定値
- false
- geometricVariation
- 日本語名
- 幾何学的変形
- 型
- string
- 規定値
- ValidatableControlShell.StandardGeometricVariations.regular
- 利用可能な選択肢
- ValidatableControlShell.StandardGeometricVariations.regular
- ValidatableControlShell.StandardGeometricVariations.small
- (`ValidatableControlShell.defineCustomGeometricVariations(CustomGeometricVariationsNamesEnumeration)`で定義された中から何れか)
- decorativeVariation
- 日本語名
- 修飾的変形
- 型
- string
- 規定値
- ValidatableControlShell.StandardDecorativeVariations.regular
- 利用可能な選択肢
- ValidatableControlShell.StandardDecorativeVariations.regular
- (`ValidatableControlShell.defineCustomDecorativeVariations(CustomDecorativeVariationsEnumeration)`で定義された中から何れか)
- rootElementModifierCSS_Class
- 日本語名
- 根要素の修飾子CSSクラス
- 型
- string
- 必須
- いいえ
- rootElementModifierCSS_Classes
- 日本語名
- 根要素の修飾子CSSクラスの配列
- 型
- 指数配列
- 必須
- いいえ
- 配列の要素
- 型
- string
- rootElementSpaceSeparatedModifierCSS_Classes
- 日本語名
- 空白で区切られた根要素の修飾子CSSクラス一覧
- 型
- string
- 必須
- いいえ