Page

A Page component is an interactive layer that displays paginated content. In the Preview, a user can snap between pages by scrolling and swiping the content.

To create a Page, click the Page tool in the Toolbar, then click and drag on the canvas to draw the Page.

Content

To use a Page, you must also connect the Page to one or more content layers that the Page will display as its pages.

Tip: You can think of a Page as a window through which a user can drag between its pages.

To add a layer to a Page's pages, click on the Connector on the Page's right edge, then click on the layer that you would like to add to the Page's pages.

You can see a list of a Page's pages on the Properties panel under the Content heading.

Note: The same layer can appear more than once in a Page's pages.

Property Controls

Direction

The Direction property controls whether the Page will move left to right or up and down.

Lock

The Lock property controls whether the Page should ignore dragging in its opposite direction while scrolling between pages.

When set to 1 Axis, the Page will ignore dragging along in its opposite direction once the user has begun dragging.

Tip: This property is useful when the Page's pages contain their own Scroll or Page layers. For example, when a horizontal Page contains a page with a vertical Scroll.

Width and Height

The Width and Height properties control how the Page treats the dimensions of its connected pages.

When set to Stretch, the Page will resize its pages to match its own corresponding dimension. When set to Auto, the Page will preserve each layer's original dimension.

Tip: A Page's pages don't have to all be the same size. If you want to display pages with varying dimensions, use the Auto value for the dimensions that vary.

Gap

The Gap property controls how much space the Page should leave between its pages.

Padding

The Padding property controls how much padding the Page should leave between the current page and the Page's edges.

To set a separate value for the each sides, click the Padding per Side button.

Tip: To create a Page that shows part of its next and previous page, set a Padding value that is greater than the Page's Gap value.

Current

The Current property controls the Page's initial current page.

Note: A Page's list of pages is zero-indexed, meaning that the first page will be page 0, the next will be page 1, and so on.

Momentum

The Momentum property controls whether the Page should consider drag momentum when handling page changes.

When set to Off, the Page's next current page will be determined only by which page is closest to center when the user stops scrolling.

When set to On, the user's scroll momentum will also determine the next current page, allowing a user to scroll past multiple pages by performing a fast swipe.

Dragging

The Dragging property controls whether the Page should respond to drag interactions.

When the Dragging property is set to On, a user will be able to change the Page's current page in the Preview window by clicking and dragging.

Wheel scroll

The Dragging property controls whether the Page should respond to scroll interactions.

When the Wheel Scroll property is set to On, a user will be able to use their device's standard scroll gesture to scroll through the Page's content.

Note: When Wheel Scroll is set to On, the Page will not snap to pages.

Effect

The Effect property controls the appearance of each page as the user scrolls between pages. The Page includes four effects: Cube, Cover Flow, Wheel, and Pile.

Content

The Content property lists each of the Page's content layers (or "pages"). The order of layers in the list controls the order of pages in the component.

To change a layer's place in the list, click the drag handle next to its name and drag the layer to its new place.

To remove a layer from the list, untick the checkbox next to its name, then click the - button next to the Content heading.

To add a layer to the list by name, click the + button next to the Content heading and choose the layer you want to add.