Avatar

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

Note

Text can be displayed instead of images.

Properties

No	Item	Input Value	Default Value	Action Property	Type	Action Default Value	Description
1	ID	String	Auto-generated	id	string	Auto-generated	The [id] property cannot be set by action.
2	Width	String	40	width	number/string	40	Component width
3	Height	String	40	height	number/string	40	Component height
4	X	String		x	number/string		X coordinate position
5	Y	String		y	number/string		Y coordinate position
6	Size	Selection 1. Small 2. Medium 3. Large 4. None	None	size	string	none	Avatar size setting
7	Style	Selection 1. Circle 2. Rounded 3. Square	Circle	variant	string	circular	Avatar shape
8	Color	String Color Picker		color	string		Avatar color
9	Badge	Boolean	OFF	badge	boolean	false	Badge display state
10	Visibility	Boolean	ON	visibility	boolean	true	Component visibility state
11	Value	String		value	string		Path to file manager
12	Letter	String		letter	string		Character displayed on avatar
13	Click Event	Selection 1. None 2. Menu	None	clickEvent			Click behavior
14	Menu Items	Tabular [Detail 1]	[Detail 1]	menuItems	object array	[Detail 1]	Menu items setting

Note

• "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.
• When setting the "Size" property from an action, you can choose from the following values:
  1. small
  2. medium
  3. large
  4. none
• If you select none for the "Size" property, you will be able to configure the "Width" and "Height" properties.
• 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%
• If you specify the "Width" and "Height" properties using the calc() function, the avatar’s appearance will not change.
• The "Width" and "Height" properties are always based on the "Width" value, so the avatar will automatically keep both dimensions the same size.
• 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
  }
]

Note

• 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.