@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
48 lines (34 loc) • 1.61 kB
Markdown
# MPageHeader
The Page Header is a fundamental component that structures the top part of an interface, serving as a cognitive anchor point for users. It establishes page context, facilitates navigation, and provides the main actions available within the current scope.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title*` | Main title displayed in the page header. | `string` | - |
| `shadow` | Enables a drop shadow under the page header. | `boolean` | - |
| `backButton` | Displays a back icon button in the header. | `boolean` | - |
| `status` | Component status. | `"info"` `"warning"` `"error"` `"success"` `"neutral"` | - |
| `statusLabel` | Label text displayed inside the status badge. | `string` | - |
| `extraInfo` | Additional information text shown below the title. | `string` | - |
## Slots
| Name | Description |
| --- | --- |
| `actions` | Use this slot to insert feature items in the top content. |
| `context` | Use this slot to insert context switcher component. |
| `content` | Use this slot to insert any content below the Page Header top content. |
| `tabs` | Use this slot to insert a tab in the header. |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `back` | Emits when the back button is clicked. | [] |
| `toggle-menu` | Emits when the burger menu button is clicked. | [] |
## Dependencies
### Depends on
- [MIconButton](../iconbutton)
- [MStatusBadge](../statusbadge)
### Graph
```mermaid
graph TD;
MPageHeader --> MIconButton
MPageHeader --> MStatusBadge
style MPageHeader fill:#008240,stroke:#333,stroke-width:4px
```