アバター

アバターはアイコン状のイメージコンポーネントです。クリックによりメニューを開くことも可能です。

ノート

イメージの代わりに文字を表示することも可能です。

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	自動設定	id	string	自動設定	[id]プロパティはアクションで設定はできません。
2	幅	文字列	40	width	number/string	40	コンポーネントの幅
3	高さ	文字列	40	height	number/string	40	コンポーネントの高さ
4	X	文字列		x	number/string		X座標の位置
5	Y	文字列		y	number/string		Y座標の位置
6	位置固定	真偽	OFF	lock	boolean	false	ONの場合は画面をスクロールしてもコンポーネントが固定されて表示されます。 OFFの場合は画面をスクロールするとそれに合わせてコンポーネントも動きます。 v4.1.0で追加されたプロパティ
7	サイズ	選択 1. 小 2. 中 3. 大 4. なし	なし	size	string	none	アバターのサイズ設定
8	スタイル	選択 1. 円 2. 角丸 3.正方形	円	variant	string	circular	アバターの形状
9	色	文字列 カラーピッカー		color	string		アバターの色
10	バッジ	真偽	OFF	badge	boolean	false	バッジの表示状態
11	キャッシュ無効	真偽	OFF	cacheDisabled	boolean	false	アバターのイメージに対してのキャッシュ利用状態 v4.1.0で追加されました。
12	表示	真偽	ON	visibility	boolean	true	コンポーネントの表示状態
13	値	文字列		value	string		ファイルマネージャへのパス
14	レター	文字列		letter	string		アバターに表示する文字
15	クリックイベント	選択 1. なし 2. メニュー 3. 切り離されたアクション	なし	clickEvent			クリック時の動作 切り離されたアクションはv4.1.0で選択可能になりました。
16	メニューアイテム	表形式 [詳細1]	[詳細1]	menuItems	object array	[詳細1]	メニューアイテムの設定
17	切り離されたアクション	選択 1.[切り離されたアクションのID]		detachedAction	string		切り離されたアクションを設定 v4.1.0で追加されたプロパティ

ノート

• [値(value)]のイメージセルのアイコンをクリックするとファイルマネージャからの選択が可能です。
• アバターにイメージではなく文字列を表示したい場合、[レター(letter)]に表示する文字列を設定してください。
• [値 (value)]と[レター(letter)]両方設定している場合は、[値 (value)]が優先されます。
• [バッジ(badge)]は、オン(true)の場合はアバターの右下に緑色のマークを表示します。 オフ(false)の場合はアバターに緑色のマークを表示しません。 また、バッジの表示／非表示を自動的に行う機能はありません。
• [メニューアイテム]のNext UIに初期登録されていない認証UIを設定しないでください。初期登録されていない認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。
• [サイズ]プロパティをアクションから設定する場合、以下の値を設定することが出来ます。
  1. small
  2. medium
  3. large
  4. none
• [サイズ]プロパティ値で「なし」を選択した場合、[幅]、[高さ]プロパティ値の設定が可能となります。
• [幅]、[高さ]プロパティ値には下記を入力できます。
  px表示したい場合は数値のみ、%表示したい場合は単位に%を指定してください。
  下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • 数値%
• [幅]、[高さ]プロパティ値をcalc()関数で指定した場合、アバター自体の見た目には反映されません。
• [幅]、[高さ]プロパティ値は常に[幅]の値が基準となり、自動的に同じ大きさとなります。
• [X] 、[Y]プロパティ値には下記を入力できます。
  px表示したい場合は数値のみを指定してください。
  下記以外を入力した場合の動作はサポート外になります。
  • 数値
  • calc()関数
• calc()関数はCSSの関数で、計算を可能にする関数です。（例：calc(100% - 30px)）
  calc()関数で使用できる単位は「%」と「px」です。それ以外の単位（例：em,remなど）はサポート外になります。
• calc()関数を用いてサイズを指定した際は、エディタ上の表示とアプリ上の見た目が異なることがあります。 プレビューを用いてご確認ください。

[詳細1] メニューアイテム

デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。
削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	ICON	LABEL	CLICK EVENT	NEXT UI	Detached Action	URL	DIVIDER
チェックボックス	Profile	AccountCircle	Profile	None				いいえ
チェックボックス	MFA_Setting	Settings	MFA Setting	NextUi	MFA Setting step1			いいえ
チェックボックス	Change_Password	LockReset	Change password	NextUi	Change Password			いいえ
チェックボックス	Sign_Out	Logout	Sign out	NextUi	Sign Out			いいえ

menuItemsはオブジェクトの配列形式になります。

[
  {"id":"Profile","icon":"AccountCircle","label":"Profile","clickEvent":"None","nextUi":"","url":"","divider":false},
  {"id":"MFA_Setting","icon":"Settings","label":"MFA Setting","clickEvent":"NextUi","nextUi":"MFA_Setting_Step1_code","url":"","divider":false},
  {"id":"Change_Password","icon":"LockReset","label":"Change Password","clickEvent":"NextUi","nextUi":"Change_Password_code","url":"","divider":false},
  {"id":"Sign_Out","icon":"Logout","label":"Sign Out","clickEvent":"NextUi","nextUi":"Sign_Out_code","url":"","divider":false}
]

ノート

• ドロワーのクリックイベントの選択肢は None | Next UI | URL | Action | Detached Action となります。
• ドロワーでクリックイベント[Action]を選択した場合、コンポーネントのコンテキストメニューよりアクションエディタを起動できるようになります。
• 区切り線は[はい (true)]の場合、そのメニュー要素の下に区切り線が付与されます。
• [NEXT UI]に認証UIを設定しないでください。[NEXT UI]に認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。

イベント

イベント名	説明
onclick	クリックした時にアクションを実行します。