ValidatableControlShell (React)
ページが準備中
恐れ入りますが、現在此のページは未完成の状態です。
単一行テキストフィールド(ValidatableControlShell(type="text"))、 複数行テキスト入力(textarea)、ドロップダウンリスト (select)などの入力要素は、通常は単独で使用されず、 次のような補助的な要素に囲まれます。
- キャプション(通常は
label要素) - 注釈(例:電話番号入力フィールドの「ハイフンと括弧は任意です」など)
- 「必須」または「任意」のラベル
- バリデーションメッセージ
質の高いデザインの原則の一つによれば、これらすべての周囲の要素は統一されたスタイルで 作成されるべきであるため、入力要素を囲む内容を持つテンプレート コンポーネントの 必要性が生じます。 YDF では、そのようなコンポーネントは ValidatableControlShell (直訳すると「バリデーション可能なコンポーネントのシェル」)です。 その名前が示すように、このコンポーネントは独立したものではなく、 他のコンポーネントの一部である必要があり、より正確にはそれらのためのシェルとなります。
ValidatableControlShell自体は バリデーション可能なコンポーネントではありません。なぜなら、渡されたバリデーションメッセージを表示するだけであり、 それ自体は何らバリデーションを行わないからです。バリデーションは、ValidatableControlShellが囲んでいるメインコンポーネントの役割です。- 名前の選択において、「wrapper」という言葉は「shell」よりもはるかに多義的であるため避けられました。 そのため、ユーザーインターフェースコンポーネントに関して、「wrapper」は単にメインコンポーネントの両側を その要素で文字通り包むことだけでなく、メインコンポーネントの機能を拡張することも意味する場合があります。
概要
- コンポーネントのクラス
ValidatableControlShell- ReactコンポーネントのLive template (IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)
- オートコンプリート系
ValidatableControlShell--YDF-React- 省略
vsc-ydf-react
- スタイル生成専用Stylusミクスイン
generateValidatableControlShellYDF_GUI_ComponentStyles- 用意済みのテーマ
ValidatableControlShell.Themes.regular- 標準(規定)
- 用意済みの幾何学的変形
ValidatableControlShell.GeometricVariations.regular- 標準(規定)
ValidatableControlShell.GeometricVariations.small- 小型
- 用意済みの修飾的変形
ValidatableControlShell.DecorativeVariations.regular- 標準(規定)
- ローディングプレースホルダ
- 無し
ValidatableControlShellClassクラス
Reactプロパティ
ValidatableControlShell.Properties
{
- 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.Themes.regular
- nullは不可か
- はい
- 利用可能な選択肢
- ValidatableControlShell.Themes.regular
- (`ValidatableControlShell.defineThemes(themesNames)`で定義された中から何れか)
- areThemesCSS_ClassesCommon
- 日本語名
- テーマCSSクラスは共通真偽
- 型
- boolean
- undefinedの代替
- ValidatableControlShell.areThemesCSS_ClassesCommon
- nullは不可か
- はい
- geometricVariation
- 日本語名
- 幾何学的変形
- 型
- string
- undefinedの代替
- ValidatableControlShell.GeometricVariations.regular
- nullは不可か
- はい
- 利用可能な選択肢
- ValidatableControlShell.GeometricVariations.regular
- ValidatableControlShell.GeometricVariations.small
- (`ValidatableControlShell.defineGeometricVariations(geometricVariationsNames)`で定義された中から何れか)
- decorativeVariation
- 日本語名
- 修飾的変形
- 型
- string
- undefinedの代替
- ValidatableControlShell.DecorativeVariations.regular
- nullは不可か
- はい
- 利用可能な選択肢
- ValidatableControlShell.DecorativeVariations.regular
- (`ValidatableControlShell.defineDecorativeVariations(decorativeVariationsNames)`で定義された中から何れか)
- className
- 日本語名
- 空白で区切られた根要素の修飾子CSSクラス一覧
- 型
- string
- undefinedは不可か
- いいえ
- nullは不可か
- はい
- 最小文字数
- 1