Example
Variants
Compact
Top level
Depending on the usecase, the Scene Header can contain different elements. E.g. more buttons, links, a search or indicators that show different states. On our example page you can find the different variations of the Scene Header
Summary
- Sticky Header. Since the elements within the header have an essential meaning for the user, it is always visible - even if the rest of the content is scrolled.
- Responsiveness. The action area on the right gets as much space as it needs, while the headline on the left side is truncated.
- Orientation. Both the breadcrumb trail and the headline help the user to orientate. When the user navigates within the platform or is taken somewhere in the platform via a direct link, these elements always show the current location.
- Actions. The actions are (almost) always located at the top right. Even if it does not always correspond to the user's usual reading-/clicking-flow, we can guarantee that the most important actions are always in the same place and never outside the fold.
The two main areas
Orientation area
It is very important to inform the users about where they are. The most important elements for this are in the .wui-scene-header__secondary. In UX design, there is the so-called trunk test. In this scenario, we imagine that a blindfolded person is locked in the trunk of a car. After driving around for a while and having the blindfold removed, that person is likely to be very disoriented with no idea where he/she is. Now let's imagine that a user - just like the person in the trunk - navigates around the platform more or less blindfolded. The moment you remove the blindfold from the user and ask them where they are, they should be able to tell. At this point, it becomes clear how important the breadcrumb trail and the headline in the Scene Header are. While the headline shows the current position, the breadcrumb trail gives an information about where you are in the overall context of the platform or where you just came from.
There is no headline more important than the headline within the Scene Header. This also means there will never be a heading in the content that is larger than 26px.
Action area
Besides the primary actions, the .wui-scene-header__primary can also contain a search or other actions related to the whole content of the page (such as the button to change views). To make sure that these important actions can be used even by users with small screens, the area on the right side is always displayed completely, while the headline on the left side for example would be truncated.
Elements within the action area always affect the content of the entire page and do not refer only to specific parts of the page. E.g. the search in the action area always refers to all entries of the page and not only to a single section.
A set of opinionated scene components.
import {
WuiScene,
WuiSceneHeader,
WuiSceneBody,
WuiSceneBreadcrumb,
WuiSceneBreadcrumbItem,
} from "@wui/wui-vue/lib/scene";
Example
<wui-scene :is-loading="false" :is-initialized="true">
<wui-scene-header title="Scene Title">
<template #breadcrumb>
<wui-scene-breadcrumb>
<wui-scene-breadcrumb-item
><a href="#">Link 1</a></wui-scene-breadcrumb-item
>
<wui-scene-breadcrumb-item
><a href="#">Link 2</a></wui-scene-breadcrumb-item
>
</wui-scene-breadcrumb>
</template>
<template #secondary>
<wui-button variant="primary">Primary action</wui-button>
</template>
</wui-scene-header>
<wui-scene-body>
<!-- content -->
</wui-scene-body>
</wui-scene>
WuiScene
The WuiScene component is the root component of a scene and acts as state provider for the other scene components.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| isLoading | Boolean | false | Set to true if the scene is currently loading (see Concepts). |
| isInitialized | Boolean | true | Set to false if the scene is not initialized (see Concepts). |
| isCompact | Boolean | false | Renders the scene in compact mode (scene header only contains breadcrumb). |
| isTopLevel | Boolean | false | Renders the scene in top-level mode (scene header contains no breadcrumb) |
| unlimitedContainerWidth | Boolean | false | Set to true if the grid container in the scene header and body should have unlimited width. |
Note: All props are provided as sceneState to child components and are used internally to control the opinionated default behavior of the scene. It is discouraged to inject the provided state into custom components as it is an internal API and may be subject to change.
Slots
| Name | Default | Description |
|---|---|---|
| default | Intended to host a WuiSceneHeader and a WuiSceneBody component as siblings. |
WuiSceneHeader
The WuiSceneHeader component hosts the breadcrumb, the scene title, and optionally secondary header content on the right, e.g. the primary action.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | String | A textual scene title that appears by default in the primary slot. |
Slots
| Name | Default | Description |
|---|---|---|
| breadcrumb | Intended to host the scene breadcrumb (see WuiSceneBreadcrumb) | |
| title | title prop | Intended to control the default scene title appearance in the primary slot. |
| primary | Populated with default scene title | Intended to replace/change the default primary header content. |
| secondary | Intended to host additional content/controls in the secondary scene header content, e.g. the primary action. | |
| panel | Intended to display additional filters for the content below, e.g. filter for table list data. Can be combined with display toggle. |
WuiSceneBody
The WuiSceneBody component hosts the main content of the scene in the default slot. If the scene is loading and not initialized, an initial loading state is shown instead of the main content.
Slots
| Name | Default | Description |
|---|---|---|
body | Content to put in the scene body. Will replace the wui-container. | |
default | Intended to host the main body of the scene. The slot is only rendered when the scene is initialized. The content is rendered inside the wui-container. | |
initial-loading-state | Populated with loading spinner | Intended to change the default initial loading state, which is displayed when the scene is initially loading. |
WuiSceneBreadcrumb
The WuiSceneBreadcrumb component renders the WuiBreadcrumb component according to the scene requirements.
Slots
| Name | Default | Description |
|---|---|---|
| default | Intended for one or multiple WuiSceneBreadcrumbItem components. |
WuiSceneBreadcrumbItem
The WuiSceneBreadcrumb component renders the WuiBreadcrumbItem component according to the scene requirements.
Slots
| Name | Default | Description |
|---|---|---|
| default | Intended for a link tag/component (e.g. <a>, <router-link>) |
Concepts
Difference between isLoading and isInitialized
The scene differentiates between two loading states to give visual feedback to the user: The initial loading state and the initialized loading state.
Initial loading state
When a scene requires remote data to render meaningful content, the isInitialized flag should be set to false and the isLoading flag should be set to true. Given this, the scene body will display the initial loading state, which, by default, is a loading spinner.
When all required requests/operations are settled (regardless of success or failure), the isInitialized flag should be set to true and the isLoading flag should be set to false.
At this point, the scene body will hide the initial loading state and render the default slot with the main content.
Initialized loading state
Given an initialized scene, when the scene is loading some additional data or is executing a "UI blocking" operation, the isLoading flag should be set to true. This will indicate to the user that the scene is currently "busy" and he or she should wait until the loading completes.
