App Bar

The app bar is a sticky header component. It can display a drawer or avatar, depending on the configuration

Tips

Tips

• Up to one app bar can be placed per UI. The drawer and avatar menus do not open on the editor. You can see them from Preview or Deploy.
• The app bar is always the foremost component. Components cannot be placed in front of the app bar.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Height	number		64
Color	string color picker
Drawer	boolean	• on • off	on
Drawer Width	number
Drawer Items	table details1		details1
Avatar	boolean	• on • off	on
Avatar Image	string
Avatar Letter	string
Avatar Color	string color picker
Avatar Badge	boolean	• on • off	off
Avatar Click Event	string	• None • Action	None
Avatar Menu	table details 2		details 2
Title	string		App Bar

Action

item	Properties	Data Type	Options	Default value
id	id	string		automatic
height	height	number		300
color	color	string
drawer	drawer	boolean	• true • false	true
drawerWidth	drawerWidth	number
drawerItems	drawerItems	array of object		details1
avatar	avatar	boolean	• true • false	true
avatarImage	avatarImage	string
avatarLetter	avatarLetter	string
avatarColor	avatarColor	string
avatarBadge	avatarBadge	boolean	• true • false	false
avatarClickEvent	avatarClickEvent	string	• none • action	action
		array of object		details 2
		string		App Bar

Tips

Tips

• The "id" property cannot be set by an action.

[Details 1] Drawer

The default status is registered as follows. Register from the "ADD" button. To delete, select the check box and click the "DELETE" button.

Select	ID	Icon	Label	Click Event	NEXT UI	URL	Divider
Checkbox	item1	MoveToInbox	Inbox	None			No
Checkbox	item2	Mail	Starred	None			No
Checkbox	item3	MoveToInbox	Send Email	None			No
Checkbox	item4	Mail	Drafts	None			Yes
Checkbox	item5	MoveToInbox	All Mail	None			No
Checkbox	item6	Mail	Trash	None			No
Checkbox	item7	MoveToInbox	Spam	None			No

[{"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

• The options for the drawer click event are None | Next UI | URL | Action.
• If you select the click event "Action" in the drawer, you will be able to launch the action editor from the context menu of the component.
• If the separator is set to "Yes (true)", a separator will be added below the menu element.
• Do not set authentication UI to "NEXT UI". If you set authentication UI to "NEXT UI", it may cause incorrect behavior, so please be careful.

[Details 2] Menu

A menu is the choices that appear when you click on an icon button. The default status is registered as follows. Register from the "Add" button. To delete, select the check box and click the "Delete" button.

Select	ID	Icon	Label	Click Event	Next UI	URL	Divider
Checkbox	Profile	AccountCircle	Profile	None			No
Checkbox	MFA_Setting	Settings	MFA Setting	NextUi	MFA Setting Step1		No
Checkbox	Change_Password	LockReset	Change password	NextUi	Change Password		No
Checkbox	Sign_Out	Logout	Sign out	NextUi	Sign Out		No

Tips

• The options for the click event of the menu are None | Next UI | URL | Action.
• If you select the click event "Action" in the menu, you will be able to launch the action editor from the context menu of the component.
• Next UI for the authentication UI is registered as a menu by default. For applications that do not require authentication, you must delete these menu elements yourself.
• Do not set an authentication UI that is not registered as the next UI. Please note that if you set an authentication UI that is not registered as the default, it may cause incorrect behavior.

Event

None