Badge (Blazor)
YDFに於いてはベッジ（badge）は、丸い角有りか無しの、四角の中に 単語や日付・時間の様な文字列を表示させる為の無動作のコンポーネント。 アイコンも追加可能ではあるが、文言の代わりには成っていなく、文言の補足である。
様々なUI/UXフレームワークに於いては似た様なコンポーネントはChipやPillや[+Term--YDID Tag]等の様に 名付けられ、定義や明確な差別化が有る訳ではない。 フレームワークに依ってコンポーネントの名前が異なり、フレームワーク内の定義がされる事も有る。 YDFも、フレームワークとして紹介されていなくても、ベッジの場合を含めて、コンポーネントの名前に対して定義を導入する事が有る。
YDFの場合ベッジは非対話型と成り、 情報を表示しているだけ。 外見が似ているが、対話可能なコンポーネントと判別する必要が有る、例えばボタン・リンクの振る舞いが有る奴か、中に✖ボタンが有る奴等。 尚、YDFに於いては文言が２件迄対応、即ちキー及び値。 例えば、日付けを表す必要が有るが、日読みのアイコンと日付けの文言だけでは具体的に何の日付けか日自明的な場合にとって役立つ機能である。
概要
- コンポーネントのクラス
Badge- スタイル生成専用Stylusミクスイン
generateBadgeYDF_GUI_ComponentStyles- 用意済みのテーマ
Badge.StandardThemes.regular- 標準（規定）
- 用意済みの幾何学的変形
Badge.StandardGeometricVariations.regular- 標準（規定）
Badge.StandardGeometricVariations.small- 小型
- 幾何学的修飾子
Badge.GeometricModifiers.pillShape- 最大の面取り
Badge.GeometricModifiers.singleLine- 強制一行、オーバーフローの時切り詰め
- 用意済みの修飾的変形
Badge.StandardDecorativeVariations.veryCatchyBright- 鮮明で超派手（規定は赤）
Badge.StandardDecorativeVariations.catchyBright- 鮮明で派手（規定はオレンジ）
Badge.StandardDecorativeVariations.modestlyCatchyBright- 鮮明でやや派手（規定で黄色）
Badge.StandardDecorativeVariations.neutralBright- 鮮明で中立的（規定で水色）
Badge.StandardDecorativeVariations.modestlyCalmingBright- 鮮明でやや穏やか（規定で青色）
Badge.StandardDecorativeVariations.calmingBright- 鮮明で穏やか（規定で緑色）
Badge.StandardDecorativeVariations.achromaticBright- 鮮明で不染色（規定で暗い灰色）
Badge.StandardDecorativeVariations.veryCatchyPastel- パステルで超派手（規定は赤）
Badge.StandardDecorativeVariations.catchyPastel- パステルで派手（規定はオレンジ）
Badge.StandardDecorativeVariations.modestlyCatchyPastel- パステルでやや派手（規定で黄色）
Badge.StandardDecorativeVariations.neutralPastel- パステルで中立的（規定で水色）
Badge.StandardDecorativeVariations.modestlyCalmingPastel- パステルでやや穏やか（規定で青色）
Badge.StandardDecorativeVariations.calmingPastel- パステルで穏やか（規定で緑色）
Badge.StandardDecorativeVariations.achromaticPastel- パステルで不染色（規定で明るい灰色）
- 修飾的修飾子
Badge__YDF.DecorativeModifiers.bordersDisguising- 大小変化無しで枠が無い効果
Badge__YDF.DecorativeModifiers.noBackground- 塗りつぶし無し
- ローディングプレースホルダ
- 無し
Badgeクラス
Razorコンポーネントの引数
Badge.Properties
{
- keyLabel
- 日本語名
- キーラベル
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- valueLabel
- 日本語名
- 値ラベル
- 型
- string
- 必須
- はい
- 最小文字数
- 1
- theme
- 日本語名
- テーマ
- 型
- string
- 規定値
- Badge.StandardThemes.regular
- 利用可能な選択肢
- Badge.StandardThemes.regular
- (`Badge.defineCustomThemes(CustomThemesEnumeration)`で定義された中から何れか)
- areThemesCSS_ClassesCommon
- 日本語名
- テーマCSSクラスは共通真偽
- 型
- boolean
- 規定値
- false
- geometricVariation
- 日本語名
- 幾何学的変形
- 型
- string
- 規定値
- Badge.StandardGeometricVariations.regular
- 利用可能な選択肢
- Badge.StandardGeometricVariations.regular
- Badge.StandardGeometricVariations.small
- (`Badge.defineCustomGeometricVariations(CustomGeometricVariationsNamesEnumeration)`で定義された中から何れか)
- geometricModifiers
- 日本語名
- 幾何学的改変
- 型
- 指数配列
- 規定値
- []
- 配列の要素
- 型
- string
- 利用可能な選択肢
- Badge.GeometricModifiers.pillShape
- Badge.GeometricModifiers.singleLine
- decorativeVariation
- 日本語名
- 修飾的変形
- 型
- string
- 必須
- はい
- 利用可能な選択肢
- Badge.StandardDecorativeVariations.veryCatchyBright
- Badge.StandardDecorativeVariations.catchyBright
- Badge.StandardDecorativeVariations.modestlyCatchyBright
- Badge.StandardDecorativeVariations.neutralBright
- Badge.StandardDecorativeVariations.modestlyCalmingBright
- Badge.StandardDecorativeVariations.calmingBright
- Badge.StandardDecorativeVariations.achromaticBright
- Badge.StandardDecorativeVariations.veryCatchyPastel
- Badge.StandardDecorativeVariations.catchyPastel
- Badge.StandardDecorativeVariations.modestlyCatchyPastel
- Badge.StandardDecorativeVariations.neutralPastel
- Badge.StandardDecorativeVariations.modestlyCalmingPastel
- Badge.StandardDecorativeVariations.calmingPastel
- Badge.StandardDecorativeVariations.achromaticPastel
- (`Badge.defineCustomDecorativeVariations(CustomDecorativeVariationsEnumeration)`で定義された中から何れか)
- decorativeModifiers
- 日本語名
- 修飾的修飾子
- 型
- 指数配列
- 規定値
- []
- 配列の要素
- 型
- string
- 利用可能な選択肢
- Badge.DecorativeModifiers.bordersDisguising
- Badge.DecorativeModifiers.noBackground
- rootElementTag
- 日本語名
- ルート要素のタグ
- 型
- string
- 規定値
- "span"
- 最小文字数
- 1
- rootElementModifierCSS_Class
- 日本語名
- 根要素の修飾子CSSクラス
- 型
- string
- 必須
- いいえ
- rootElementModifierCSS_Classes
- 日本語名
- 根要素の修飾子CSSクラスの配列
- 型
- 指数配列
- 必須
- いいえ
- 配列の要素
- 型
- string
- rootElementSpaceSeparatedModifierCSS_Classes
- 日本語名
- 空白で区切られた根要素の修飾子CSSクラス一覧
- 型
- string
- 必須
- いいえ