Home

Awesome

<h1 align="center"> iPagesπŸ“–</p> <h3 align="center"> Quickly implement swipable page views in iOS. πŸ“ </h3> <p align="center"> <strong><a href="#get-started">Get Started</a></strong> | <strong><a href="#examples">Examples</a></strong> | <strong><a href="#customize">Customize</a></strong> | <strong><a href="#install">Install</a></strong> | </p> <p align="center"> <img src="./Resources/ipages.gif" alt="CI" /> </p> <br/>

Get Started

  1. Install iPages

  2. Add iPages to your project

import SwiftUI
import iPages

struct ContentView: View {
    var body: some View {
        iPages {
            Text("iPages πŸ€‘")
            Color.pink
        }
    }
}
  1. Customize your iPages

Examples

Marketing Materials πŸ’Έ

<img align="right" src="./Resources/iPagesDemo2Light.gif" width="250">

Use iGraphicsView to demo marketing slides.

import SwiftUI
import iPages
import iGraphics

struct ContentView: View {
    var body: some View {
        iPages {
            iGraphicsView(.first)
            iGraphicsView(.second)
            iGraphicsView(.third)
        }
    }
}
<br clear="right"/> <br/> <h3 align="left">Shopping App πŸ›</h3> <p align="left">If you want, you can pass in your own optional selection binding to iPages. Hide the bottom dots & add infinite scroll to remove context.</p> <img align="left" src="./Resources/iPagesDemo1Dark.gif" width="250">
import SwiftUI
import iPages
import iGraphics

struct ContentView: View {
    @State var currentPage: Int = 0

    var body: some View {
        iPages(selection: $currentPage) {
            iGraphicsBox(.photo)
                .stack(3)
            iGraphicsBox(.card)
                .stack(2)
        }
        .hideDots(true)
        .wraps(true)
    }
}
<br clear="left"/> <br/> <br/>

Customize πŸŽ€

iPages takes a trailing view builder of ordered views. You can also optionally pass in your own page index binding called selection:, to let you build your own page control, or however you want to use it. iPages supports a variety of custom modifiers. All customizations are built into our modifiers.

Example: Change the dot colors, enable infinite wrap & hide dots for single page views with the following code block:

iPages(selection: $currentPage) {
    Text("πŸ‘")
}
.dotsTintColors(currentPage: Color, otherPages: Color)
.wraps(true)
.dotsHideForSinglePage(true)
.navigationOrientation(.vertical)

Use our exhaustive input list to customize your views.

Modifier or InitializerDescription
πŸ‘·β€β™€οΈ.init(content:)Initializes the page πŸ“ƒπŸ“– view.
πŸ‘·β€β™‚οΈ.init(selection:content:)Initializes the page πŸ“ƒπŸ“– view with a selection binding.
⏺.hideDots(_:)Modifies whether or not the page view should include the standard page control dots. (β€’β€’β€’β€’)
πŸ”„.wraps(_:)Modifies whether or not the page view should restart at the beginning πŸ” when swiping past the end (and vise-versa)
1️⃣.dotsHideForSinglePage(_:)Modifies whether the page dots are hidden when there is only one page. 1️⃣‡️
🎨.dotsTintColors(currentPage:otherPages:)Modifies tint colors πŸŸ‘πŸŸ’πŸ”΄πŸŸ£ to be used for the page dots.
πŸ”˜.dotsBackgroundStyle(_:)Modifies the background style βšͺοΈπŸ”˜ of the page dots.
πŸ”ƒ.dotsAllowContinuousInteraction(_:)Modifies the continuous interaction settings of the dots. πŸ”„
↔️.dotsAlignment(_:)Modifies the alignment of the page dots. πŸ‘† πŸ‘‡
↕️.navigationOrientation(_:)Modifies the navigation orientation of the page view. ↔️ ↕️
🦿.disableBounce(_:)Disables the bounce settings of the page view. This is especially useful for scroll views.
↔️.interPageSpacing(_:)Modifies the spacing between the pages. ↔️
πŸŽ₯.animated(_:)Modifies whether the the pages animate the slide if the selection binding changes. πŸŽ₯

Install

Use the Swift package manager to install. Find instructions hereπŸ˜€