Page
The frame of an app page: header and content share one column, a line comes as the content scrolls, and on a phone the header becomes a floating glass bar.
import {
Page,
PageActions,
PageBar,
PageContent,
PageHeader,
PageHeading,
PageSubtitle,
PageTitle,
} from "@plexui/vue/components/Page";Examples
Widths
Heading
Fill
Phone
Under 768px the header is one row of 44px over the page. It floats: at rest nothing shows, and content scrolled under it turns it to glass with a hairline. The content keeps its place through --page-top, the top inset and the bar together, also for anything else that has to start below the bar, such as a banner.
Keep the row to a title and one group of actions. The bar has no room for a second row, so anything set under PageBar, such as a search field, belongs at the top of PageContent on a phone. useBreakpoint("md") tells which one to render. The first column of the bar stays free for the menu button of a sidebar.
Use it inside SidebarInset for a whole app, see the app sidebar.
API
Page
| Prop | Type | Default | Description |
|---|---|---|---|
width | "full" | "wide" | "column" | "full" | Column that header and content share: edge to edge, 1280px or 768px, centred |
class | string | — | Class of the root element |
All other attributes fall through to the root.
PageHeader
| Prop | Type | Default | Description |
|---|---|---|---|
divider | boolean | true | Shows the line, and the glass on a phone, once the content has scrolled under the header |
class | string | — | Class of the band |
The default slot stands in the shared column. All other attributes fall through to the band.
PageContent
| Prop | Type | Default | Description |
|---|---|---|---|
fill | boolean | false | The content fills the page and scrolls inside itself, from 768px up |
class | string | — | Class of the element that scrolls |
The default slot stands in the shared column. All other attributes, listeners included, fall through to the element that scrolls. Its template ref is the component: read the element from $el.
Parts
| Part | Element | Purpose |
|---|---|---|
PageBar | <div> | Row of the title and the actions |
PageHeading | <div> | Title with what stands beside it |
PageTitle | <h1> | Page heading |
PageSubtitle | <p> | Status of the page |
PageActions | <div> | Buttons on the trailing side of the bar |
Styling
Page reads these component tokens. Override them at any scope to restyle it:
--page-background: background (defaultvar(--color-surface))--page-bar-gap: gap between title and actions (default24px)--page-bar-height: bar height (default36px)--page-bar-height-phone: bar height on a phone (default44px)--page-bar-line: hairline of the glass bar (defaultlight-dark(rgb(0 0 0 / 10%), var(--color-border)))--page-bar-veil: fill of the glass bar (defaultlight-dark(rgb(255 255 255 / 72%), rgb(0 0 0 / 60%)))--page-content-padding-bottom: bottom of the content (default48px)--page-content-padding-top: top of the content on a phone (default16px)--page-gutter: side gutter on a phone (default16px)--page-gutter-wide: side gutter and top of the content from 768px up (default24px)--page-header-padding-bottom: gap between the bar and the line (default12px)--page-header-padding-top: top of the header (default12px)--page-title-font-size: title font size (default20px)--page-title-line-height: title line height (default26px)--page-width: width of the column, any value--page-width-column:columnwidth (default768px)--page-width-wide:widewidth (default1280px)