Badge
(Blazor)
ページが準備中
恐れ入りますが、現在此のページは未完成の状態です。 残念ながら、現時点では外部リンクしか提示出来ません。
枠に囲まれた本文は電算化よりずっと早く、本や其の他の印刷物に使われていた。 殆ど常に此の様に重要な本文が強調されるが、備考や其の他の従的情報にもよく使われる。
ウェブサイト・アプリケーションの開発に於いては、本文が枠に囲まれる場合の種類も増え、頻度も高く成った。
- 印刷物の場合と同じ様に、枠はウェブサイトに於いては長文の中に需要な部分を強調される為に使われる。 訪問者に強調された本文の需要度を一瞬間に判断させるには、色使いの既読が活用。 例えば、需要な部分には暖色(赤、橙、黄色)が使われ、二次的な部分には寒色(青、緑)が、無彩色(黒・灰色の枠に囲まれ、背景は白か薄い灰色)が利用される。 色に加えて、アイコンが使われる事が多い。
- グラフィック・ユーザー・インターフェースに於いて、枠に囲まれた本文の役割が広がり、利用者達を通知する為の手段の中一つに成った。 常に数秒しか表示されていないポップアップメッセージと違って、枠に囲まれた本文がずっと表示される、但し利用者が意識的にメッセージを 非表示に出来る様にボタンが付いている事がある。 尚、通知自体と他に、利用者に反応する事を促している文と、反応行動為のボタンも追加する推薦。
枠に囲まれた本文を下記の場合に活用する推薦。
- サーバーからデータ取得中エラーが発生した時
- 此の場合、データをもう一度取得する為のボタンを追加すると良い。
- 表示するデータが無い時
- データが全く無い場合と、データは有るが検索結果は無い場合毎本文を用意した方が良い。 其れに依って、反応の提案も異なり、データが全く無い場合データを追加する事を提案し(其の為の権限が有ったら)、検索結果場合、絞り込み条件をリセットする ボタンを追加すると良い。
- ウェブサイト・アプリケーションの利用に就いて短文の案内
- 新しいユーザー向けだけではなく、未だ多数であるコンピューターのリテラシーが低い利用者にとってとても重要なもの。
- ユーザーに具体的な行動を促す時
- 例えば、貴方のウェブサイト又がアプリケーションに認証が任意な場合、アカウント登録する事を提案し、其れの利点を説明すると良い。 勿論、アカウント作成ページへのリンク用意し、登録済みの利用者達向けにログインページへのリンクを用意するべき。
逆に、下記の場合には枠に囲まれた本文は最良の選択肢ではない。
- データ送信中発生したエラーの通知
- データ送信成功に就いてエラーの通知
- サインイン・サインアウト通知
上記の場合だと、浮かぶメッセージ(YDFだと、Snackbarコンポーネント)の方が専用のものだ。
要約
- コンポーネントのクラス
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
- 塗りつぶし無し
- ローディングプレースホルダ
- 有り