Badge

YDFに於いてはベッジ（badge）は、丸い角有りか無しの、四角の中に 単語や日付・時間の様な文字列を表示させる為の無動作のコンポーネント。 アイコンも追加可能ではあるが、文言の代わりには成っていなく、文言の補足である。

様々なUI/UXフレームワークに於いては似た様なコンポーネントはChipやPillや[+Term--YDID Tag]等の様に 名付けられ、定義や明確な差別化が有る訳ではない。 フレームワークに依ってコンポーネントの名前が異なり、フレームワーク内の定義がされる事も有る。 YDFも、フレームワークとして紹介されていなくても、ベッジの場合を含めて、コンポーネントの名前に対して定義を導入する事が有る。

YDFの場合ベッジは非対話型と成り、 情報を表示しているだけ。 外見が似ているが、対話可能なコンポーネントと判別する必要が有る、例えばボタン・リンクの振る舞いが有る奴か、中に✖ボタンが有る奴等。 尚、YDFに於いては文言が２件迄対応、即ちキー及び値。 例えば、日付けを表す必要が有るが、日読みのアイコンと日付けの文言だけでは具体的に何の日付けか日自明的な場合にとって役立つ機能である。

• 要約
• 利用
  • マークアップ
    • プロジェクトに含む方法
    • Pug混入のBadge--YDF
      • 最低限の例（必須プロパティのみ）
  • ロジック

要約

Pugミクスイン

Badge--YDF

スタイル生成専用Stylusミクスイン

provideBadgeYDF_Component

用意済みのテーマ

Badge__YDF.Themes.regular

標準（規定）

用意済みの幾何学的変形

Badge__YDF.GeometricVariations.regular

標準（規定）

Badge__YDF.GeometricVariations.small

小型

幾何学的修飾子

Badge__YDF.GeometricModifiers.pillShape

最大の面取り

Badge__YDF.GeometricModifiers.singleLine

強制一行、オーバーフローの時切り詰め

用意済みの修飾的変形

Badge__YDF.DecorativeVariations.veryCatchyBright

鮮明で超派手（規定は赤）

Badge__YDF.DecorativeVariations.catchyBright

鮮明で派手（規定はオレンジ）

Badge__YDF.DecorativeVariations.modestlyCatchyBright

鮮明でやや派手（規定で黄色）

Badge__YDF.DecorativeVariations.neutralBright

鮮明で中立的（規定で水色）

Badge__YDF.DecorativeVariations.modestlyCalmingBright

鮮明でやや穏やか（規定で青色）

Badge__YDF.DecorativeVariations.calmingBright

鮮明で穏やか（規定で緑色）

Badge__YDF.DecorativeVariations.achromaticBright

鮮明で不染色（規定で暗い灰色）

Badge__YDF.DecorativeVariations.veryCatchyPastel

パステルで超派手（規定は赤）

Badge__YDF.DecorativeVariations.catchyPastel

パステルで派手（規定はオレンジ）

Badge__YDF.DecorativeVariations.modestlyCatchyPastel

パステルでやや派手（規定で黄色）

Badge__YDF.DecorativeVariations.neutralPastel

パステルで中立的（規定で水色）

Badge__YDF.DecorativeVariations.modestlyCalmingPastel

パステルでやや穏やか（規定で青色）

Badge__YDF.DecorativeVariations.calmingPastel

パステルで穏やか（規定で緑色）

Badge__YDF.DecorativeVariations.achromaticPastel

パステルで不染色（規定で明るい灰色）

修飾的修飾子

Badge__YDF.DecorativeModifiers.bordersDisguising

大小変化無しで枠が無い効果

Badge__YDF.DecorativeModifiers.noBackground

塗りつぶし無し

ローディングプレースホルダ

Badge--YDF-LoadingPlaceholder

利用

マークアップ

プロジェクトに含む方法

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

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug