Avatar

An avatar is an iconic image component. It can also be clicked to open a menu.

Tips

Tips

Text can be displayed instead of images.

Properties

UI Dialog

Item	Input value	Option	Default value
ID	string		automatic
Width	string		40
Height	string		40
X	string
Y	string
Size	string	・Small ・Medium ・Large	Medium
Variant	select	- Circular - Rounded - Square	OUTLINED
Color	string color picker
Badge	boolean	- on - off	off
Visibility	boolean	- on - off	on
Value	string select dialog
Letter	string
Click Event	select	- None - Menu	None
Menu Items	table details 1

Action

Item	Properties	Data Type	Options	Default value
id	string		automatic
width	string		40
height	string		40
x	string
y	string
size	string	・small ・medium ・large	medium
variant	string	- circular - rounded - square	circular
color	string
badge	boolean	- true - false	false
visibility	boolean	- true - false	true
value	string
letter	string
menuItems	array of object

Tips

Tips

• The "id", "width", "height", "size" property cannot be set by an action.
• "Value" is the path to the file manager.
• Click on the icon of the image cell under "value" to select it from the file manager.
• If you want the avatar to display a string instead of an image, set the string to be displayed in the "letter" field.
• If both "value" and "letter" are set, "value" takes precedence.
• When "Badge (badge)" is on (true), displays a green symbol in the lower right corner of the avatar. When off (false), the green mark is not displayed on the avatar. Also, there is no function to automatically show/hide badges.
• Do not set an authentication UI that is not initially registered for the Next UI in [Menu Item].
  Please note that setting an authentication UI that is not initially registered may result in incorrect operation.
• The following can be entered for the "Width" and "Height" property values:
  • If you want to display in px, specify only numerical values; if you want to display in %, specify % as the unit.
  • Operation will not be supported if you enter anything other than the following:
    • number
    • number%
    • calc() function
• The following can be entered for the [X] and [Y] property values:
  • If you want to display in px, specify only numerical values.
  • Operation will not be supported if you enter anything other than the following:
    • number
    • calc() function
• The calc() function is a CSS function that enables calculations. (e.g. calc(100% - 30px))
  • The units that can be used with the calc() function are "%" and "px". Other units (e.g., em, rem, etc.) are not supported.
• When the calc() function is used to specify the size, the appearance in the editor may differ from the appearance in the application.
  Please confirm using the preview.

[Details 1] Menu Item

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

“menuItems” is in the form of an array of objects.

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

Tips

Tips

• The options for the click event of the drawer 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 under the menu element.
• Do not set the authentication UI in "NEXT UI" . Please note that setting the authentication UI in “NEXT UI” may result in incorrect behavior.

Event

Event name	Description
onclick	Performs an action when clicked.