Paging » Adding space between pages

Adding space between pages

Pages in a PageComponent will always stick to each other, so in order to have spacing between the pages, you’ll have to use invisible pages in which you place your smaller, real pages.

In other words: You’ll have to wrap your pages.

# adding 8 pages
for number in [1..8]
    # a wrapper for the page
    pageWrapper = new Layer
        width: page.width, height: page.height
        backgroundColor: null
    # the page
    aPage = new Layer
        width: page.width-40, height: page.height-40
        borderRadius: 10
        backgroundColor: cycler()
        x: 20, y: 20
        parent: pageWrapper
    # adding the wrapper (!) to the PageComponent
    page.addPage pageWrapper
Download Framer project

In this example, the real pages are on all sides twenty points smaller than the wrapper.

Pages smaller than the PageComponent itself
Pages with padding added by using a wrapper