Products · Components
Pinned
Keeps what it holds on the top or bottom edge of the screen while the page scrolls.
Put it in the page's root View: first for edge="top", last for edge="bottom". Its bar reaches both sides of the screen, past the View's padding. At the bottom, use a Pinned or a Footer, not both.
Children: Components
Example
<Pinned edge="bottom" border="subtle">
<Tabs variant="bar" value="{{ tab }}" onChange="setTab">
<Tab value="home" label="Home" icon="home" />
<Tab value="orders" label="Orders" icon="receipt" badge="2" />
<Tab value="account" label="Account" icon="user" />
</Tabs>
</Pinned>export default definePage({
initialState: { tab: 'home' },
mutations: {
setTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
},
});Props
| Prop | Type | What it is |
|---|---|---|
edge | top, bottom | The edge of the screen it stays on. Default: top. |
gap | spacing | Space between its children. Default: medium. |
background | background, or a custom color | What fills the bar. Default: background. |
border | border | A line along the side that faces the page. Default: none. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
Events
None.