# Page
The Page Component allows you to create horizontally or vertically swipeable areasThe Page Component is based on a Frame
, which means that it supports all Frame properties. Add Frames to a Page
to create pages to swipe between. They will be stretched to the size of the page component by default, but can also be set to auto
, to maintain their original size.
- Create horizontal or vertical pages
- Create scrollable lists that snap to content
- Use custom transitions like 3D and Pile
import * as React from "react"
import { Frame, Page } from "framer"
export function MyComponent() {
return (
<Page>
<Frame>A</Frame>
<Frame>B</Frame>
<Frame>C</Frame>
</Page>
)
}
# Content
# alignment: PageAlignment
Alignment of the pages within the component. Either "start", "center", or "end". Set to "start"
by default.
<Page alignment="center" />
# animateCurrentPageUpdate: booleanBeta
Determines whether the component should animate page changes. Set to true
by default.
<Page animateCurrentPageUpdate={false} />
# contentHeight: PageContentDimension | number
Height of the pages within the component. Either "auto" or "stretch" or a numeric value. Set to "stretch"
by default.
<Page contentHeight="auto" />
# contentOffsetX: MotionValue<number> | number
Horizontal offset of the scrollable content. Set to 0
by default
<Page contentOffsetX={20} />
# contentOffsetY: MotionValue<number> | number
Vertical offset of the scrollable content. Set to 0
by default.
<Page contentOffsetY={20} />
# contentWidth: PageContentDimension | number
Width of the pages within the component. Either "auto" or "stretch" or a numeric value. Set to "stretch"
by default.
<Page contentWidth="auto" />
# currentPage: number
Index of the current page. Set to 0
by default.
<Page currentPage={5} />
# defaultEffect: PageEffect
Pick one of the predefined effects. Either "none", "cube", "coverflow", "wheel" or "pile". Set to "none"
by default.
<Page defaultEffect={"coverflow"} />
# direction: PageDirection
Current swipe direction. Either "horizontal" or "vertical". Set to "horizontal"
by default.
<Page direction="horizontal" />
# directionLock: boolean
If true
, this will lock dragging to the initial direction.
<Page direction="both" directionLock={true} />
# dragEnabled: boolean
Enable or disable dragging to scroll. Defaults to true
.
<Page dragEnabled={false} />
# gap: number
A number describing the gap between the page elements. Set to 10
by default. Can not be negative.
<Page gap={0} />
# momentum: boolean
When enabled you can flick through multiple pages at once.
<Page momentum />
# wheelEnabled: boolean
Enable or disable wheel scroll. Defaults to false
.
<Page wheelEnabled={true} />
# Padding
# gap: number
A number describing the gap between the page elements. Set to 10
by default. Can not be negative.
<Page gap={0} />
# padding: number
Padding to be applied to all sides. Set to 0
by default. To specify different padding for each side, provide individual paddingTop
, paddingLeft
, paddingRight
and paddingBottom
values.
<Page padding={20} />
# paddingTop: number
Value for the top padding of the container. Set to 0
by default.
<Page paddingTop={20} />
# paddingRight: number
<Page paddingRight={20} />
Value for the right padding of the container. Set to 0
by default.
# paddingBottom: number
<Page paddingBottom={20} />
Value for the bottom padding of the container. Set to 0
by default.
# paddingLeft: number
<Page paddingLeft={20} />
Value for the left padding of the container. Set to 0
by default.
# Events
# onChangePage(currentIndex, previousIndex): void
A callback that will be invoked when changing the page.
<Page
onChangePage={(current, previous) => {
console.log(current, previous)
}}
/>
currentIndex: number The current page number |
---|
previousIndex: number The index of the previous page |
# Effects
The Page
component comes with a set of pagination effects that change how pages look and animate as you scroll through them. You can also create custom effects of your own.
# None
No custom effect is applied. This is the default.
<Page defaultEffect={"none"} />
# Cube
Each page is positioned as a 3D cube, connected to the current page.
<Page defaultEffect={"cube"} />
# Cover Flow
Each page is positioned in 3D, behind the current page.
<Page defaultEffect={"coverflow"} />
# Wheel
Each page is gently titled in 3D, like a wheel.
<Page defaultEffect={"wheel"} />
# Pile
Each page is stacked behind the current page.
<Page defaultEffect={"pile"} />
# Custom
# effect: (info: PageEffectInfo) => PageEffectValues
Allows you to provide a custom transition effect for individual pages.
This function is called once for every page, every time the scroll offset changes. It returns a new set of styles for this page.
function scaleEffect(info) {
const { normalizedOffset } = info
return {
scale: Math.max(0, 1 + Math.min(0, normalizedOffset * -1))
}
}
return <Page effect={scaleEffect} />
# PageEffectInfo
Information about the current effect.
# direction: PageDirection
The direction of page scrolling, "horizontal"
or "vertical"
# gap: number
The gap between each page, in pixels.
# index: number
The index of the current page. The first page is 0
, the second is 1
and so on.
# normalizedOffset: number
The offset of this page, normalised to the page size.
For instance, if each page is 200
pixels wide, and we're on page index 1
, the normalizedOffset
of page index 0
will be -1
.
# offset: number
The offset of this page, in pixels, measured from the left-most part of the container.
# pageCount: number
The total number of pages.
# size: Size
The width
and height
of the page.