アプリバー

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

Tips

Tips

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

プロパティ

UIダイアログ

項目	入力値	オプション	デフォルト値
ID	文字列		自動設定
高さ	数値		64
色	文字列 カラーピッカー
ドロワー	真偽	• オン • オフ	オン
ドロワー幅	数値
ドロワーアイテム	表形式 詳細1		詳細1
アバター	真偽	• オン • オフ	オン
アバターイメージ	文字列
アバターレター	文字列
アバター色	文字列 カラーピッカー
アバターバッジ	真偽	• オン • オフ	オフ
アバタークリックイベント	文字列	• なし • アクション	なし
アバターメニューアイテム	表形式 詳細2		詳細2
タイトル	文字列		App Bar

アクション

項目	プロパティ	データ型	オプション	デフォルト値
id	id	string		自動設定
高さ	height	number		300
色	color	string
ドロワー	drawer	boolean	• true • false	true
ドロワー幅	drawerWidth	number
ドロワーアイテム	drawerItems	array of object		詳細1
アバター	avatar	boolean	• true • false	true
アバターイメージ	avatarImage	string
アバターレター	avatarLetter	string
アバター色	avatarColor	string
アバターバッジ	avatarBadge	boolean	• true • false	false
アバタークリックイベント	avatarClickEvent	string	none action	action
アバターメニューアイテム		array of object		詳細2
タイトル		string		App Bar

Tips

Tips

• [id]プロパティはアクションで設定はできません。

[詳細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}]

Tips

Tips

• ドロワーのクリックイベントの選択肢は 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		いいえ

Tips

Tips

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

イベント

なし