Yamato DaiwaFrontend (2.0.0-beta.4)
English
日本語
Русский

Badge (React)

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

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

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

概要

コンポーネントのクラス
Badge
ReactコンポーネントのLive template (IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)
オートコンプリート系
Badge--YDF-React
省略
bdg-ydf-react
ローディング・プレースホルダー
Badge--YDF-LoadingPlaceholder-React
スタイル生成専用Stylusミクスイン
generateBadgeYDF_GUI_ComponentStyles
用意済みのテーマ
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
塗りつぶし無し
ローディングプレースホルダ
無し

Badgeクラス

Reactプロパティ

Badge.Properties
{
keyLabel
日本語名
キーラベル
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
valueLabel
日本語名
値ラベル
型
string
undefinedは不可か
はい
nullは不可か
はい
最小文字数
1
theme
日本語名
テーマ
型
string
undefinedの代替
Badge.Themes.regular
nullは不可か
はい
利用可能な選択肢
  • Badge.Themes.regular
  • (`Badge.defineThemes(themesNames)`で定義された中から何れか)
areThemesCSS_ClassesCommon
日本語名
テーマCSSクラスは共通真偽
型
boolean
undefinedの代替
Badge.areThemesCSS_ClassesCommon
nullは不可か
はい
geometricVariation
日本語名
幾何学的変形
型
string
undefinedの代替
Badge.GeometricVariations.regular
nullは不可か
はい
利用可能な選択肢
  • Badge.GeometricVariations.regular
  • Badge.GeometricVariations.small
  • (`Badge.defineGeometricVariations(geometricVariationsNames)`で定義された中から何れか)
geometricModifiers
日本語名
幾何学的改変
型
指数配列
undefinedの代替
[]
nullは不可か
はい
undefined要素可否
はい
null要素可否
はい
配列の要素
型
string
利用可能な選択肢
  • Badge.GeometricModifiers.pillShape
  • Badge.GeometricModifiers.singleLine
decorativeVariation
日本語名
修飾的変形
型
string
undefinedは不可か
はい
nullは不可か
はい
利用可能な選択肢
  • 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.defineDecorativeVariations(decorativeVariationsNames)`で定義された中から何れか)
decorativeModifiers
日本語名
修飾的修飾子
型
指数配列
undefinedの代替
[]
nullは不可か
はい
undefined要素可否
はい
null要素可否
はい
配列の要素
型
string
利用可能な選択肢
  • Badge.DecorativeModifiers.bordersDisguising
  • Badge.DecorativeModifiers.noBackground
rootElementTag
日本語名
ルート要素のタグ
型
string
undefinedの代替
"span"
nullは不可か
はい
最小文字数
1
className
日本語名
空白で区切られた根要素の修飾子CSSクラス一覧
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
SVG_Icon
型
React.ElementType<{ className: string; }>
undefinedは不可か
いいえ
nullは不可か
はい
rootElementAttributes
日本語名
根要素のHTML属性
型
Omit<React.HTMLAttributes<HTMLDivElement>, "className">
undefinedは不可か
いいえ
nullは不可か
はい
}

© 2023 Yamato Daiwa Co., Ltd.