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

AdmonitionBlock

枠に囲まれた本文は電算化よりずっと早く、本や其の他の印刷物に使われていた。 殆ど常に此の様に重要な本文が強調されるが、備考や其の他の従的情報にもよく使われる。

ウェブサイト・アプリケーションの開発に於いては、本文が枠に囲まれる場合の種類も増え、頻度も高く成った。

  • 印刷物の場合と同じ様に、枠はウェブサイトに於いては長文の中に需要な部分を強調される為に使われる。 訪問者に強調された本文の需要度を一瞬間に判断させるには、色使いの既読が活用。 例えば、需要な部分には暖色（赤、橙、黄色）が使われ、二次的な部分には寒色（青、緑）が、無彩色（黒・灰色の枠に囲まれ、背景は白か薄い灰色）が利用される。 色に加えて、アイコンが使われる事が多い。
  • グラフィック・ユーザー・インターフェースに於いて、枠に囲まれた本文の役割が広がり、利用者達を通知する為の手段の中一つに成った。 常に数秒しか表示されていないポップアップメッセージと違って、枠に囲まれた本文がずっと表示される、但し利用者が意識的にメッセージを 非表示に出来る様にボタンが付いている事がある。 尚、通知自体と他に、利用者に反応する事を促している文と、反応行動為のボタンも追加する推薦。

枠に囲まれた本文を下記の場合に活用する推薦。

サーバーからデータ取得中エラーが発生した時
此の場合、データをもう一度取得する為のボタンを追加すると良い。
表示するデータが無い時
データが全く無い場合と、データは有るが検索結果は無い場合毎本文を用意した方が良い。 其れに依って、反応の提案も異なり、データが全く無い場合データを追加する事を提案し（其の為の権限が有ったら）、検索結果場合、絞り込み条件をリセットする ボタンを追加すると良い。
ウェブサイト・アプリケーションの利用に就いて短文の案内
新しいユーザー向けだけではなく、未だ多数であるコンピューターのリテラシーが低い利用者にとってとても重要なもの。
ユーザーに具体的な行動を促す時
例えば、貴方のウェブサイト又がアプリケーションに認証が任意な場合、アカウント登録する事を提案し、其れの利点を説明すると良い。 勿論、アカウント作成ページへのリンク用意し、登録済みの利用者達向けにログインページへのリンクを用意するべき。

逆に、下記の場合には枠に囲まれた本文は最良の選択肢ではない。

  • データ送信中発生したエラーの通知
  • データ送信成功に就いてエラーの通知
  • サインイン・サインアウト通知

上記の場合だと、浮かぶメッセージ（YDFだと、Snackbarコンポーネント）の方が専用のものだ。

概要

Pugミクスイン
AdmonitionBlock--YDF
PugミクスインのLive template (IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)
オートコンプリート系
AdmonitionBlock--YDF
省略
ab-ydf
Loading Placeholder
スタイル生成専用Stylusミクスイン
generateAdmonitionBlockYDF_GUI_ComponentStyles
用意済みのテーマ
AdmonitionBlock__YDF.Themes.regular
標準（規定）
用意済みの幾何学的変形
AdmonitionBlock__YDF.GeometricVariations.regular
標準（規定）
AdmonitionBlock__YDF.GeometricVariations.stickyNoteLike
付箋らしい
用意済みの修飾的変形
AdmonitionBlock__YDF.DecorativeVariations.notice
標準（規定）
AdmonitionBlock__YDF.DecorativeVariations.error
エラー・重要通知
AdmonitionBlock__YDF.DecorativeVariations.warning
警告
AdmonitionBlock__YDF.DecorativeVariations.success
成功した行動
AdmonitionBlock__YDF.DecorativeVariations.guidance
案内
AdmonitionBlock__YDF.DecorativeVariations.question
質問
ローディングプレースホルダ
無し

利用

マークアップ

プロジェクトへの取り組み

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

Pug混入のAdmonitionBlock--YDF

AdmonitionBlock--YDF
(
1パラメーター目
必須
一般技術名
properties
日本語名
プロパティ揃い
型
Properties
):void
AdmonitionBlock.propertiesSpecification
{
title
日本語名
見出し
型
string
undefinedは不可か
いいえ
nullは不可か
はい
最小文字数
1
SVG_Icon
日本語名
SVGアイコン
型
多形性
undefinedは不可か
いいえ
nullは不可か
はい
選択肢
  • 型
    boolean
  • 型
    固定スキーマのオブジェクト
    スキーマ
    {
    innerElementID
    型
    string
    undefinedは不可か
    はい
    nullは不可か
    はい
    最小文字数
    1
    SVG_ElementAttributes
    型
    連想配列型のオブジェクト
    undefinedの代替
    {}
    nullは不可か
    はい
    undefinedバリューが不可か
    はい
    nullバリューが不可か
    はい
    連想配列の値
    型
    string
    最小文字数
    1
    }
dismissible
日本語名
コンポーネントを取り除ける真偽
型
boolean
undefinedの代替
false
nullは不可か
はい
theme
日本語名
テーマ
型
string
undefinedの代替
AdmonitionBlock__YDF.Themes.regular
nullは不可か
はい
利用可能な選択肢
  • AdmonitionBlock__YDF.Themes.regular
  • (`AdmonitionBlock__YDF.defineThemes(themesNames)`で定義された中から何れか)
areThemesCSS_ClassesCommon
日本語名
テーマCSSクラスは共通真偽
型
boolean
undefinedの代替
AdmonitionBlock__YDF.areThemesCSS_ClassesCommon
nullは不可か
はい
geometricVariation
日本語名
幾何学的変形
型
string
undefinedの代替
AdmonitionBlock__YDF.GeometricVariations.regular
nullは不可か
はい
利用可能な選択肢
  • AdmonitionBlock__YDF.GeometricVariations.regular
  • AdmonitionBlock__YDF.GeometricVariations.stickyNoteLike
  • (`AdmonitionBlock__YDF.defineGeometricVariations(geometricVariationsNames)`で定義された中から何れか)
decorativeVariation
日本語名
修飾的変形
型
string
undefinedは不可か
はい
nullは不可か
はい
利用可能な選択肢
  • AdmonitionBlock__YDF.DecorativeVariations.notice
  • AdmonitionBlock__YDF.DecorativeVariations.error
  • AdmonitionBlock__YDF.DecorativeVariations.warning
  • AdmonitionBlock__YDF.DecorativeVariations.success
  • AdmonitionBlock__YDF.DecorativeVariations.guidance
  • AdmonitionBlock__YDF.DecorativeVariations.question
  • (`AdmonitionBlock__YDF.defineDecorativeVariations(decorativeVariationsNames)`で定義された中から何れか)
}

© 2023 Yamato Daiwa Co., Ltd.