About and legal overlay
Guidelines Development
Guidelines​
The About and legal component is an overlay we typically use to show application information, application versions, license terms, legal regulations, copyright information and other legal content. It appears when users click on the "About and legal" icon (1) and overlays the current content. Closing this overlay brings users back to the original content.
- (1) Info icon: opens and closes the About and legal overlay
- (2) Replaceable content header: with default string "About & legal information"
- (3) Close button: closes the overlay
- (4) Tabs (optional): navigates through multiple content categories
- (5) Changeable content: we use this to add specific application information and local legal regulations (note our Figma design is our personal recommendation)
Behavior​
Overlay opens on top of application content with a semi-transparent background with a background blur effect to emphasize the overlay character. Closing this overlay brings users back to the previous content.
The overlay can be closed in three ways:
- Select the close button.
- Click the info icon again.
- Click another navigation item.
When the navigation menu is collapsed, the overlay stays open.
Development​
Examples​
Basic​
Change language of legal links​
Supported language codes are 'global/en' | 'global/es' | 'de/de' | 'cn/zh'
API (ix-menu-about)​
Properties​
Name
Description and specifications
activeTabLabel
Active tab
Attribute:
active-tab-labelType:
string ｜ undefinedlabel
Content of the header
Attribute:
labelType:
stringDefault:
'About & legal information'show
Internal
Attribute:
showType:
booleanDefault:
falseEvents​
Name
Description and specifications
close
About and Legal closed
Detail:
CustomCloseEventAPI (ix-menu-about-item)​
Properties​
Name
Description and specifications
label
About Item label
Attribute:
labelType:
string ｜ undefinedEvents​
Name
Description and specifications
labelChange
Label changed
Detail:
CustomLabelChangeEvent