Badge (React)
ページが準備中
恐れ入りますが、現在此のページは未完成の状態です。 残念ながら、現時点では外部リンクしか提示出来ません。
YDFに於いてはベッジ（badge）は、丸い角有りか無しの、四角の中に 単語や日付・時間の様な文字列を表示させる為の無動作のコンポーネント。 アイコンも追加可能ではあるが、文言の代わりには成っていなく、文言の補足である。
様々なUI/UXフレームワークに於いては似た様なコンポーネントはChipやPillや[+Term--YDID Tag]等の様に 名付けられ、定義や明確な差別化が有る訳ではない。 フレームワークに依ってコンポーネントの名前が異なり、フレームワーク内の定義がされる事も有る。 YDFも、フレームワークとして紹介されていなくても、ベッジの場合を含めて、コンポーネントの名前に対して定義を導入する事が有る。
YDFの場合ベッジは非対話型と成り、 情報を表示しているだけ。 外見が似ているが、対話可能なコンポーネントと判別する必要が有る、例えばボタン・リンクの振る舞いが有る奴か、中に✖ボタンが有る奴等。 尚、YDFに於いては文言が２件迄対応、即ちキー及び値。 例えば、日付けを表す必要が有るが、日読みのアイコンと日付けの文言だけでは具体的に何の日付けか日自明的な場合にとって役立つ機能である。
要約
- コンポーネントのクラス
Badge- スタイル生成専用Stylusミクスイン
provideBadgeYDF_Component- 用意済みのテーマ
Badge.Themes.regular- 標準（規定）
- 用意済みの幾何学的変形
Badge.GeometricVariations.regular- 標準（規定）
Badge.GeometricVariations.small- 小型
- 幾何学的修飾子
Badge.GeometricModifiers.pillShape- 最大の面取り
Badge.GeometricModifiers.singleLine- 強制一行、オーバーフローの時切り詰め
- 用意済みの修飾的変形
Badge.DecorativeVariations.veryCatchyBright- 鮮明で超派手（規定は赤）
Badge.DecorativeVariations.catchyBright- 鮮明で派手（規定はオレンジ）
Badge.DecorativeVariations.modestlyCatchyBright- 鮮明でやや派手（規定で黄色）
Badge.DecorativeVariations.neutralBright- 鮮明で中立的（規定で水色）
Badge.DecorativeVariations.modestlyCalmingBright- 鮮明でやや穏やか（規定で青色）
Badge.DecorativeVariations.calmingBright- 鮮明で穏やか（規定で緑色）
Badge.DecorativeVariations.achromaticBright- 鮮明で不染色（規定で暗い灰色）
Badge.DecorativeVariations.veryCatchyPastel- パステルで超派手（規定は赤）
Badge.DecorativeVariations.catchyPastel- パステルで派手（規定はオレンジ）
Badge.DecorativeVariations.modestlyCatchyPastel- パステルでやや派手（規定で黄色）
Badge.DecorativeVariations.neutralPastel- パステルで中立的（規定で水色）
Badge.DecorativeVariations.modestlyCalmingPastel- パステルでやや穏やか（規定で青色）
Badge.DecorativeVariations.calmingPastel- パステルで穏やか（規定で緑色）
Badge.DecorativeVariations.achromaticPastel- パステルで不染色（規定で明るい灰色）
- 修飾的修飾子
Badge__YDF.DecorativeModifiers.bordersDisguising- 大小変化無しで枠が無い効果
Badge__YDF.DecorativeModifiers.noBackground- 塗りつぶし無し
- ローディングプレースホルダ
- 有り