Coder Social home page Coder Social logo

mattnewberry / panmodal Goto Github PK

View Code? Open in Web Editor NEW

This project forked from slackhq/panmodal

0.0 1.0 0.0 32.81 MB

An elegant and highly customizable presentation API for constructing bottom sheet modals on iOS.

License: MIT License

Ruby 2.03% Swift 97.27% Objective-C 0.70%

panmodal's Introduction

PanModal is an elegant and highly customizable presentation API for constructing bottom sheet modals on iOS.

Screenshot Preview

Platform: iOS 10.0+ Language: Swift 5 CocoaPods compatible Carthage compatible License: MIT

FeaturesCompatibilityInstallationUsageDocumentationContributingAuthorsLicense

Read our blog on how Slack is getting more 👍 with PanModal

Swift 4.2 support can be found on the Swift4.2 branch.

Features

  • Supports any type of UIViewController
  • Seamless transition between modal and content
  • Maintains 60 fps performance

Compatibility

PanModal requires iOS 10+ and is compatible with Swift 4.2 projects.

Installation

pod 'PanModal'
github "slackhq/PanModal"
  • Swift Package Manager, add the following line to your Package.swift:
dependencies: [
  .package(url: "https://github.com/slackhq/PanModal.git", .exact("1.2.6")),
],

Usage

PanModal was designed to be used effortlessly. Simply call presentPanModal in the same way you would expect to present a UIViewController

.presentPanModal(yourViewController)

The presented view controller must conform to PanModalPresentable to take advantage of the customizable options

extension YourViewController: PanModalPresentable {

    var panScrollable: UIScrollView? {
        return nil
    }
}

PanScrollable

If the presented view controller has an embedded UIScrollView e.g. as is the case with UITableViewController, panModal will seamlessly transition pan gestures between the modal and the scroll view

class TableViewController: UITableViewController, PanModalPresentable {

    var panScrollable: UIScrollView? {
        return tableView
    }
}

Adjusting Heights

Height values of the panModal can be adjusted by overriding shortFormHeight or longFormHeight

var shortFormHeight: PanModalHeight {
    return .contentHeight(300)
}

var longFormHeight: PanModalHeight {
    return .maxHeightWithTopInset(40)
}

Updates at Runtime

Values are stored during presentation, so when adjusting at runtime you should call panModalSetNeedsLayoutUpdate()

func viewDidLoad() {
    hasLoaded = true

    panModalSetNeedsLayoutUpdate()
    panModalTransition(to: .shortForm)
}

var shortFormHeight: PanModalHeight {
    if hasLoaded {
        return .contentHeight(200)
    }
    return .maxHeight
}

Sample App

Check out the Sample App for more complex configurations of PanModalPresentable, including navigation controllers and stacked modals.

Documentation

Option + click on any of PanModal's methods or notes for detailed documentation.

Screenshot Preview

Contributing

We're glad to be open sourcing this library. We use it in numerous places within the slack app and expect it to be easy to use as well as modify; we've added extensive documentation within the code to support that.

We will only be fixing critical bugs, thus, for any non-critical issues or feature requests we hope to be able to rely on the community using the library to add what they need. For more information, please read the contributing guidelines.

Authors

Stephen SowoleTosin Afolabi

License

PanModal is released under a MIT License. See LICENSE file for details.

panmodal's People

Contributors

tosinaf avatar marcocanc avatar mattnewberry avatar nikitskynikita avatar av0c0der avatar lkeude96 avatar giulio92 avatar guillianbalisi avatar runmad avatar santosgagbegnon avatar shoheiyokoyama avatar simdani avatar freybupt avatar

Watchers

James Cloos 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.