App Bar

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

Note

• 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

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	app_bar	id	string	app_bar	The [id] property cannot be set by action.
2	Height	Number	64	height	number	300	Height of the component
3	Color	String Color Picker		color	string		Color setting of the component
4	Drawer	Boolean	ON	drawer	boolean	true	Display state of the drawer
5	Drawer Width	Number		drawerWidth	number		Width setting of the drawer
6	Drawer Icon Color	String Color Picker		drawerIconColor	string		Drawer icon color setting Property added in v3.4.0
7	Drawer Items	Tabular [Detail 1]	[Detail 1]	drawerItems	array of object	[Detail 1]	Drawer items setting
8	Title Color	String Color Picker		titleColor	string		Title color setting Property added in v3.4.0
9	Avatar	Boolean	OFF	avatar	boolean	true	Display state of the avatar
10	Avatar Image	String		avatarImage	string		Avatar image setting
11	Letter	String		avatarLetter	string		Character displayed on avatar
12	Avatar Color	String Color Picker		avatarColor	string		Avatar background color
13	Avatar Badge	Boolean	OFF	avatarBadge	boolean	false	Display state of avatar badge
14	Avatar Click Event	String 1. None 2. Action	None	avatarClickEvent	string	action	Action when avatar is clicked
15	Avatar Menu Items	Tabular [Detail 2]	[Detail 2]	avatarMenuItems	array of object	[Detail 2]	Avatar items setting
16	Title	String	App Bar	title	string	App Bar	Title display of the app bar

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

Note

• 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

Note

• 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