アプリバー

アプリバーはスティッキーなヘッダーコンポーネントです。設定によって、ドロワーやアバターを表示することができます。

ノート

• アプリバーはひとつのUIに対してひとつまで配置できます。エディタ上ではドロワーやアバターのメニューは開きません。プレビューまたはデプロイから確認できます。
• アプリバーは常に最前面に配置されるコンポーネントです。アプリバーより前面にコンポーネントを配置することはできません

プロパティ

No	項目	入力値	デフォルト値	アクションプロパティ	タイプ	アクションデフォルト値	説明
1	ID	文字列	app_bar	id	string	app_bar	[id]プロパティはアクションで設定はできません。
2	高さ	数値	64	height	number	300	コンポーネントの高さ
3	色	文字列 カラーピッカー		color	string		コンポーネントの色設定
4	ドロワー	真偽	ON	drawer	boolean	true	ドロワーの表示状態
5	ドロワー幅	数値		drawerWidth	number		ドロワーの幅設定
6	ドロワーアイテム	表形式 [詳細1]	[詳細1]	drawerItems	array of object	[詳細1]	ドロワーアイテムの設定
7	アバター	真偽	OFF	avatar	boolean	true	アバターの表示状態
8	アバターイメージ	文字列		avatarImage	string		アバター画像の設定
9	アバターレター	文字列		avatarLetter	string		アバターに表示する文字
10	アバター色	文字列 カラーピッカー		avatarColor	string		アバターの背景色
11	アバターバッジ	真偽	オフ	avatarBadge	boolean	false	アバターバッジの表示状態
12	アバタークリックイベント	文字列 1. なし 2. アクション	なし	avatarClickEvent	string	action	アバタークリック時の動作
13	アバターメニューアイテム	表形式 [詳細2]	[詳細2]	avatarMenuItems	array of object	[詳細2]	アバターアイテムの設定
14	タイトル	文字列	App Bar	title	string	App Bar	アプリバーのタイトル表示

[詳細1] ドロワー

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

選択	ID	アイコン	ラベル	クリックイベント	NEXT UI	URL	区切り線
チェックボックス	item1	MoveToInbox	Inbox	None			いいえ
チェックボックス	item2	Mail	Starred	None			いいえ
チェックボックス	item3	MoveToInbox	Send Email	None			いいえ
チェックボックス	item4	Mail	Drafts	None			はい
チェックボックス	item5	MoveToInbox	All Mail	None			いいえ
チェックボックス	item6	Mail	Trash	None			いいえ
チェックボックス	item7	MoveToInbox	Spam	None			いいえ

[{"id":"item1","Icon":"MoveToInbox","label":"Inbox","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item2","Icon":"Mail","label":"Starred","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item3","Icon":"MoveToInbox","label":"Send Email","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item4","Icon":"Mail","label":"Drafts","Clickevent":"None","NextUi":"","url":"","divider":true},{"id":"item5","Icon":"MoveToInbox","label":"All Mail","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item6","Icon":"Mail","label":"Trash","Clickevent":"None","NextUi":"","url":"","divider":false},{"id":"item7","Icon":"MoveToInbox","label":"Spam","Clickevent":"None","NextUi":"","url":"","divider":false}]

ノート

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

[詳細2]メニュー

メニューとはアイコンボタンをクリックしたときに表示される選択肢のことです。 デフォルトの状態は以下のように登録されています。[ADD]ボタンから登録します。 削除する場合は、チェックボックスを選択して、[DELETE]ボタンをクリックします。

選択	ID	アイコン	ラベル	クリックイベント	Next UI	URL	区切り線
チェックボックス	Profile	AccountCircle	Profile	None			いいえ
チェックボックス	MFA_Setting	Settings	MFA Setting	NextUi	MFA Setting Step1		いいえ
チェックボックス	Change_Password	LockReset	Change password	Next UI	Change Password		いいえ
チェックボックス	Sign_Out	Logout	Sign out	Next UI	Sign Out		いいえ

ノート

• メニューのクリックイベントの選択肢は None | Next UI | URL | Action となります。
• メニューでクリックイベント[Action]を選択した場合、コンポーネントのコンテキストメニューよりアクションエディタを起動できるようになります。
• 認証UIへのNext UIがメニューとして初期登録されています。認証を必要としないアプリケーションの場合、 これらのメニュー要素は自身で削除する必要があります。
• Next UIに初期登録されていない認証UIを設定しないでください。初期登録されていない認証UIを設定した場合、不正な動作になることがありますので、ご注意ください。

イベント

なし