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-label
Type:
string
label
Content of the header
Attribute:
label
Type:
string
Default:
'About & legal information'
show
Internal
Attribute:
show
Type:
boolean
Default:
false
Events
Name
Description and specifications
close
About and Legal closed
Detail:
CustomCloseEvent
API (ix-menu-about-item)
Properties
Name
Description and specifications
label
About Item label
Attribute:
label
Type:
string
Events
Name
Description and specifications
labelChange
Label changed
Detail:
CustomLabelChangeEvent