You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import { iconReplace, iconSupport } from "@siemens/ix-icons/icons";
11
+
import {Card, CardList} from '@site/src/components/Card';
12
+
import '../../docs/home/card-with-icon.css';
13
+
14
+
# UXT Migration to Siemens Industrial Experience
15
+
16
+
17
+
18
+
As part of our journey, we proudly announce the integration of User Experience Toolkit (UXT) into Siemens Industrial Experience (iX). This strategic move consolidates our design resources and provides you with a more comprehensive, modern, and efficient solution.
19
+
20
+
<CardList>
21
+
<Cardlink="home/migration/uxt"><IxIconclassName="Card_Icon"name={iconReplace}size="16"></IxIcon> Migrate from UXT to iX</Card>
Copy file name to clipboardExpand all lines: docs/components/application-header/guide.md
+49-49Lines changed: 49 additions & 49 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,65 +5,35 @@ doc-type: 'tab-item'
5
5
6
6
4.[Slot](#slot) for additional elements (optional)
12
-
5.[Avatar](#avatar) (optional)
8
+
1. Application switch (optional)
9
+
2. Brand logo
10
+
3. Application name
11
+
4. Slot for additional elements (optional)
12
+
5. Avatar (optional)
13
13
14
-
## Application switch
15
-
16
-
Use the application switch (see [application](../application)) to allow users to navigate across applications. When clicking the application switch (1), a modal with a list of available applications opens.
17
-
18
-
## Brand logo
19
-
20
-
Provide the brand logo (2) as SVG. The logo must be monochromatic and cannot contain strokes as it is colored during runtime depending on your chosen theme.
21
-
For Siemens applications, only the Siemens logo with the brand theme is allowed.
22
-
23
-
## Application name
24
-
25
-
The application name (3) shows the official name of the application. It can be extended with additional information by using the pipe character "|" and 2 spaces before and after to separate both.
14
+
## Options
26
15
27
-
## Slot
16
+
-**Show menu:** If the application is hosted inside a framework that comes with its own header, you can omit the entire application header to avoid having two headers on top of each other. The framework’s header then provides the brand identity, the application name and other information.
17
+
-**Name:** The application name shows the official name of the application. To show additional information use the pipe character "|" and 2 spaces before and after to separate both.
18
+
-**Logo:** Provide the brand logo as SVG. The logo must be monochromatic and cannot contain strokes as it is colored during runtime depending on your chosen theme. For Siemens applications, only the Siemens logo with the brand theme is allowed.
19
+
-**Application switch:** Use the [application switch](../application/guide.md#application-switch) to allow users to navigate across applications. When clicking the application switch a modal with a list of available applications opens.
20
+
-**Avatar:**
21
+
- **Top:** Defines the first line of the additional user information. We typically use this to show primary user information (first and last name or username), depending on the available information. Overflows are clipped with an ellipsis (…).
22
+
- **Bottom:** Defines the second line of additional user information, used to show secondary information, for example user role. Overflows are clipped with an ellipsis (…).
23
+
- **Initials:** Shows avatar with initials.
24
+
- **Image:** Shows avatar with images.
25
+
-**Slot:** Use the slot to provide additional high-level information or actions and functions which may impact the application context, e.g. mode switching. Note that overflows are not handled automatically; at breakpoint `sm` the slot collapses and is only accessible via the overflow icon.
28
26
29
27
30
28
31
-
We use this slot to provide additional high-level information or actions and functions which may impact the application context, e.g. mode switching. Note that overflows are not handled automatically; at breakpoint sm the slot collapses and is only accessible via the overflow icon.
32
-
33
29
We typically use the slot for:
34
30
35
31
- Log in button, if the application runs without a logged in user
36
32
- Changing the top level data context like environment, workspace, tenant or similar
37
33
- Important contextual information users should be aware of (like local times in remote access use cases)
38
34
- Access to application-wide actions like global search
39
35
40
-
## Avatar
41
-
42
-
With the new modular application frame we moved the avatar from the navigation menu to the application header. This ensures the avatar has security-relevant information available at all breakpoints. Nonetheless, if you still use the [basic navigation](../../legacy/map-navigation), the avatar is still in the navigation menu for compatibility reasons.
43
-
44
-
45
-
46
-
6. Avatar dropdown
47
-
7. User avatar
48
-
8. Top text line
49
-
9. Bottom text line
50
-
51
-
The avatar is an optional element and indicates the current logged in user. If your application doesn’t support different users or user profiles, don’t use the avatar.
52
-
53
-
Clicking the avatar opens a dropdown (6) with additional user information (7, 8, 9) and possibly other user related actions like log out, profile settings or user settings.
54
-
55
-
56
-
57
-
If your application can be used without being logged in to, you can offer access to a login process in different ways, for example:
58
-
59
-
- Show a log in button in the [slot for additional elements](#slot) and hide the avatar.
60
-
- Show the avatar with a placeholder image and show text in the user information section.
61
-
62
-
## Options
63
-
64
-
If the application is hosted inside a framework that comes with its own header, you can omit the entire application header to avoid having two headers on top of each other. The framework’s header then provides the brand identity, the application name and other information.
65
-
66
-
## Behavior
36
+
## Behavior in context
67
37
68
38
The header automatically adapts the breakpoints defined in the [application](../application).
69
39
@@ -72,7 +42,7 @@ The header automatically adapts the breakpoints defined in the [application](../
72
42
10. Layout at breakpoint lg and md
73
43
11. Layout at breakpoint (sm)
74
44
12. Application menu icon
75
-
13. Overflow icon to access the slot content (14)
45
+
13. Overflow icon to access the slot content
76
46
14. Slot content
77
47
15. Close icon to close the application menu
78
48
16. Application menu with the application switch icon at the top
@@ -84,9 +54,39 @@ At breakpoints "lg" and "md" the application header behaves identically. At brea
84
54
- The brand logo disappears.
85
55
- The slot for additional elements (if used) moves to the overflow dropdown that opens on click on the overflow icon (13).
86
56
57
+
### Avatar
58
+
59
+
With the new modular application frame, we moved the avatar from the navigation menu to the application header. This ensures the avatar has security-relevant information available at all breakpoints.
60
+
61
+
62
+
63
+
1. Avatar dropdown
64
+
2. User avatar
65
+
3. Top text line
66
+
4. Bottom text line
67
+
68
+
The avatar is an optional element and indicates the current logged in user. If your application doesn’t support different users or user profiles, the avatar can be removed.
69
+
70
+
Clicking the avatar opens a dropdown (1) with additional user information (2, 3, 4) and possibly other user related actions like log out, profile settings or user settings.
71
+
72
+
73
+
74
+
If your application is accessible without a specific user or profile log in, you can offer alternative ways of logging in without needing to specify a user or showing the avatar. Alternative approaches can be:
75
+
76
+
- Show a log in button in the slot for additional elements and hide the avatar.
77
+
- Show the avatar with a placeholder image and show text in the user information section.
78
+
79
+
:::info
80
+
81
+
The deprecated [basic navigation](../../legacy/basic-navigation) and [map navigation](../../legacy/map-navigation) use the avatar in the [application menu](../application-menu).
0 commit comments