Paging » Adding pages

Adding pages

In the previous example, I had to position the pages by setting their x property, but there’s an easier way. The addPage() function lets you append pages without having to calculate their x or y offset.

For example:

# Create a PageComponent
page = new PageComponent
    width: 120, height: 120
# Create a set of layers
layerA = new Layer
layerB = new Layer
# Add layerA (to the right)
# Add layerB to the bottom
page.addPage layerA
page.addPage layerB, "bottom"

You can add pages to the "right" (the default, for horizontal paging) or "bottom" (for vertical paging).

It’s not possible to add pages to the ‘left’ or ‘top,’ but you can decide which page should be presented first with the snap to page function.

(It is possible to have rows and columns of pages, and then scroll horizontally and vertically through this grid of pages. In this case, the PageComponent will also snap to individual pages.)

Let’s modify our code to use addPage():

# adding 4 pages
page1 = new Layer
    width: page.width, height: page.height
    backgroundColor: cycler()
page.addPage page1
page2 = new Layer
    width: page.width, height: page.height
    backgroundColor: cycler()
page.addPage page2
...
Download Framer project
Pages added with the ‘add page’ function
The same: A PageComponent with four pages