Git Product home page Git Product logo

swiftuipageview's Introduction

SwiftUI PageView

SwiftUI stack views with paged scrolling behaviour.

Demo

HPageView

A view that arranges its children in a horizontal line, and provides paged scrolling behaviour.

Usage

HPageView(alignment: .leading, pageWidth: 250, spacing: 12) {
    //Pages
}

Parameters

  • alignment: The guide for aligning the pages in this page view.
  • pageWidth: The width of each page, or nil if you want each page to fill the width of the page view.
  • spacing: The distance between adjacent pages, or nil if you want the page view to choose a default distance for each pair of pages.
  • content: A view builder that creates the content of this page view.

VPageView

A view that arranges its children in a vertical line, and provides paged scrolling behaviour.

Usage

VPageView(alignment: .top, pageHeight: 250, spacing: 12) {
    //Pages
}

Parameters

  • alignment: The guide for aligning the pages in this page view.
  • pageHeight: The height of each page, or nil if you want each page to fill the height of the page view.
  • spacing: The distance between adjacent pages, or nil if you want the page view to choose a default distance for each pair of pages.
  • content: A view builder that creates the content of this page view.

PageView

A view that arranges its children in a line, and provides paged scrolling behaviour.

Changes to the layout axis will cause the pages to lose any internal state, and will not be animated.

Usage

PageView(.horizontal, alignment: .leading, pageLength: 250, spacing: 12) {
    //Pages
}

Parameters

  • axis: The layout axis of this page view.
  • alignment: The guide for aligning the pages in this page view.
  • pageLength: The length of each page, parallel to the layout axis, or nil if you want each page to fill the length of the page view.
  • spacing: The distance between adjacent pages, or nil if you want the page view to choose a default distance for each pair of pages.
  • content: A view builder that creates the content of this page view.

PageViewReader

A view that provides programmatic paging, by working with a proxy to move to child pages.

Usage

PageViewReader { proxy in
    HPageView {
        //Pages
        
        Button("First") {
            withAnimation {
                proxy.moveToFirst()
            }
        }
    }
}

Parameters

  • content: The reader's content, containing a page view.

PageViewProxy

A proxy value that supports programmatic paging of the first page view within a view hierarchy.

Functions

  • moveTo(index:): Scans the first page view contained by the proxy for the page with the index closest to index, and then moves to that page.
  • moveToFirst(): Scans the first page view contained by the proxy for the first page, and then moves to that page.
  • moveToLast(): Scans the first page view contained by the proxy for the last page, and then moves to that page.

Advanced Usage

The strictPageAlignment view modifier can be used to control whether page views always use their provided alignment to position pages. Without this modifier pages will be aligned to prevent leaving empty space in the page view.

Known Issues

  • Changes to the layout axis of a PageView will cause the pages to lose any internal state, and will not be animated.
  • Active paging animations in a page view may interfere with other animations when the number of pages changes.
  • Nested page views are not currently supported.

Requirements

  • iOS 14.0+ or watchOS 7.0+
  • Xcode 12.0+

Installation

Contact

@ciaranrobrien on Twitter.

swiftuipageview's People

Contributors

ciaranrobrien avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.