AdmonitionBlock (Blazor)
ページが準備中
恐れ入りますが、当ページは未だ未着手の状態です。 公開された理由は、リンクの為のURIを取る為です。
枠に囲まれた本文は電算化よりずっと早く、本や其の他の印刷物に使われていた。 殆ど常に此の様に重要な本文が強調されるが、備考や其の他の従的情報にもよく使われる。
ウェブサイト・アプリケーションの開発に於いては、本文が枠に囲まれる場合の種類も増え、頻度も高く成った。
- 印刷物の場合と同じ様に、枠はウェブサイトに於いては長文の中に需要な部分を強調される為に使われる。 訪問者に強調された本文の需要度を一瞬間に判断させるには、色使いの既読が活用。 例えば、需要な部分には暖色(赤、橙、黄色)が使われ、二次的な部分には寒色(青、緑)が、無彩色(黒・灰色の枠に囲まれ、背景は白か薄い灰色)が利用される。 色に加えて、アイコンが使われる事が多い。
- グラフィック・ユーザー・インターフェースに於いて、枠に囲まれた本文の役割が広がり、利用者達を通知する為の手段の中一つに成った。 常に数秒しか表示されていないポップアップメッセージと違って、枠に囲まれた本文がずっと表示される、但し利用者が意識的にメッセージを 非表示に出来る様にボタンが付いている事がある。 尚、通知自体と他に、利用者に反応する事を促している文と、反応行動為のボタンも追加する推薦。
枠に囲まれた本文を下記の場合に活用する推薦。
- サーバーからデータ取得中エラーが発生した時
- 此の場合、データをもう一度取得する為のボタンを追加すると良い。
- 表示するデータが無い時
- データが全く無い場合と、データは有るが検索結果は無い場合毎本文を用意した方が良い。 其れに依って、反応の提案も異なり、データが全く無い場合データを追加する事を提案し(其の為の権限が有ったら)、検索結果場合、絞り込み条件をリセットする ボタンを追加すると良い。
- ウェブサイト・アプリケーションの利用に就いて短文の案内
- 新しいユーザー向けだけではなく、未だ多数であるコンピューターのリテラシーが低い利用者にとってとても重要なもの。
- ユーザーに具体的な行動を促す時
- 例えば、貴方のウェブサイト又がアプリケーションに認証が任意な場合、アカウント登録する事を提案し、其れの利点を説明すると良い。 勿論、アカウント作成ページへのリンク用意し、登録済みの利用者達向けにログインページへのリンクを用意するべき。
逆に、下記の場合には枠に囲まれた本文は最良の選択肢ではない。
- データ送信中発生したエラーの通知
- データ送信成功に就いてエラーの通知
- サインイン・サインアウト通知
上記の場合だと、浮かぶメッセージ(YDFだと、Snackbarコンポーネント)の方が専用のものだ。
概要
- コンポーネントのクラス
AdmonitionBlock- スタイル生成専用Stylusミクスイン
generateAdmonitionBlockYDF_GUI_ComponentStyles- 用意済みのテーマ
AdmonitionBlock.StandardThemes.regular- 標準(規定)
- 用意済みの幾何学的変形
AdmonitionBlock.StandardGeometricVariations.regular- 標準(規定)
AdmonitionBlock.StandardGeometricVariations.stickyNoteLike- 付箋らしい
- 用意済みの修飾的変形
AdmonitionBlock.StandardDecorativeVariations.notice- 標準(規定)
AdmonitionBlock.StandardDecorativeVariations.error- エラー・重要通知
AdmonitionBlock.StandardDecorativeVariations.warning- 警告
AdmonitionBlock.StandardDecorativeVariations.success- 成功した行動
AdmonitionBlock.StandardDecorativeVariations.guidance- 案内
AdmonitionBlock.StandardDecorativeVariations.question- 質問
- ローディングプレースホルダ
- 無し
AdmonitionBlockClassクラス
Razorコンポーネントの引数
AdmonitionBlock.Properties
{
- title
- 日本語名
- 見出し
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1
- dismissible
- 日本語名
- コンポーネントを取り除ける真偽
- 型
- boolean
- 規定値
- false
- theme
- 日本語名
- テーマ
- 型
- string
- 規定値
- AdmonitionBlock.StandardThemes.regular
- 利用可能な選択肢
- AdmonitionBlock.StandardThemes.regular
- (`AdmonitionBlock.defineCustomThemes(CustomThemesEnumeration)`で定義された中から何れか)
- areThemesCSS_ClassesCommon
- 日本語名
- テーマCSSクラスは共通真偽
- 型
- boolean
- 規定値
- false
- geometricVariation
- 日本語名
- 幾何学的変形
- 型
- string
- 規定値
- AdmonitionBlock.StandardGeometricVariations.regular
- 利用可能な選択肢
- AdmonitionBlock.StandardGeometricVariations.regular
- AdmonitionBlock.StandardGeometricVariations.stickyNoteLike
- (`AdmonitionBlock.defineCustomGeometricVariations(CustomGeometricVariationsNamesEnumeration)`で定義された中から何れか)
- decorativeVariation
- 日本語名
- 修飾的変形
- 型
- string
- 必須
- はい
- 利用可能な選択肢
- AdmonitionBlock.StandardDecorativeVariations.notice
- AdmonitionBlock.StandardDecorativeVariations.error
- AdmonitionBlock.StandardDecorativeVariations.warning
- AdmonitionBlock.StandardDecorativeVariations.success
- AdmonitionBlock.StandardDecorativeVariations.guidance
- AdmonitionBlock.StandardDecorativeVariations.question
- (`AdmonitionBlock.defineCustomDecorativeVariations(CustomDecorativeVariationsEnumeration)`で定義された中から何れか)
- rootElementModifierCSS_Class
- 日本語名
- 根要素の修飾子CSSクラス
- 型
- string
- 必須
- いいえ
- rootElementModifierCSS_Classes
- 日本語名
- 根要素の修飾子CSSクラスの配列
- 型
- 指数配列
- 必須
- いいえ
- 配列の要素
- 型
- string
- rootElementSpaceSeparatedModifierCSS_Classes
- 日本語名
- 空白で区切られた根要素の修飾子CSSクラス一覧
- 型
- string
- 必須
- いいえ
- hasDefaultSVG_Icon
- 日本語名
- 規定SVGアイコンを持っている真偽
- 型
- boolean
- 規定値
- false
- HTML_ID
- 日本語名
- HTMLの識別子
- 型
- string
- 必須
- いいえ
- 最小文字数
- 1