Page
What is this?
Page is a pattern that represents a complete screen of an admin application. You can use the following utility components to achieve consistency easily.
Composition
| Name | Description |
|---|---|
| Page | Outlines the page area |
| PageHeader | Users rely on the page header to navigate and orient themselves within the admin |
| PageHeaderTop | This component is used to group elements to the top part of the PageHeader |
| PageHeaderBottom | This component is used to group elements to the bottom part of the PageHeader |
| PageContent | Renders the content of the page |
Variants
With title
This is the basic usage. Use the PageHeaderTitle within the PageHeaderTop to render the page title.
With back-link
The back-link is present if the onPopNavigation property is passed.
With tags
You can also render components within the PageHeaderTitle, such as a Tag elements using the PageHeaderTags and PageHeaderTag composites.
With actions
Use the PageHeaderActions composite within the PageHeaderTop to add actions that are relevant for the whole page. Actions can be either PageHeaderButton or PageHeaderMenuButton, along with the Menu composites.
With tabs
If you ever need tabs on your PageHeader, locate them within the PageHeaderBottom component.
See the Full example section for a full example with tabs.
Usage
Import
import {
Page,
PageHeader,
PageHeaderTop,
PageHeaderTitle,
PageHeaderTags,
PageHeaderTag,
PageHeaderActions,
PageHeaderButton,
PageHeaderMenuButton,
PageHeaderBottom,
PageContent,
} from '@vtex/admin-ui'
Anatomy
Page
|__ PageHeader
| |__ PageHeaderTop
| | |__ PageHeaderTitle
| | | |__ PageHeaderTags
| | | |__ PageHeaderTag
| | |__ PageHeaderActions
| | |__ PageHeaderButton
| | |__ PageHeaderMenuButton
| | |__ Menu
| | |__ MenuItem
| |__ PageHeaderBottom
| |__ TabList
| |__ Tab
|
|__PageContent
|__ (...Some view)
Props
Page
All props of div JSX element
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| layout | wide, standard and narrow | A set of paddings and maximum widths. | 🚫 | standard |
PageContent
All props of div JSX element
PageHeader
All props of header JSX element
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| onPopNavigation | () => void | Action when back button is clicked | 🚫 | 🚫 |
PageHeaderTop
All props of div JSX element
PageHeaderTitle
All props of div JSX element
PageHeaderTags
All props of Stack Admin UI component with overriden defaults:
| Name | Default |
|---|---|
| direction | row |
| space | $m |
PageHeaderTag
All props of Tag Admin UI component with overriden defaults:
| Name | Default |
|---|---|
| size | large |
PageHeaderActions
All props of div JSX element
PageHeaderButton
All props of Button Admin UI component with overriden defaults:
| Name | Default |
|---|---|
| size | large |
PageHeaderMenuButton
All props of MenuButton Admin UI component with overriden defaults:
| Name | Default |
|---|---|
| size | large |
| variant | tertiary |
| labelHidden | true |
| bleedX | true |
PageHeaderBottom
All props of div JSX element