PanModal Documentation

repository·master·Indexed 25 days ago

https://github.com/slackhq/panmodal

A customizable presentation API for constructing bottom sheet modals on iOS. Supports any UIViewController, maintains 60 fps performance, and provides the PanModalPresentable protocol for configuring heights and seamless scroll view transitions via panScrollable.

Tokens
705
Snippets
5
Records
6
Agent score
37%

What's inside PanModal

  1. Present a PanModal view controller

    master

    To present a view controller as a bottom sheet modal, call presentPanModal on your presenting view controller. For full customization, the presented view controller must conform to the PanModalPresentable protocol.

    .presentPanModal(yourViewController)
  2. Configure PanScrollable for seamless transitions

    master

    If your view controller contains an embedded UIScrollView (such as a UITableViewController), implement the panScrollable property in your PanModalPresentable conformance. This allows PanModal to seamlessly transition pan gestures between the modal sheet and the scroll view.

    class TableViewController: UITableViewController, PanModalPresentable {
    
        var panScrollable: UIScrollView? {
            return tableView
        }
    }
  3. Adjust PanModal heights

    master

    You can control the height of the modal by overriding shortFormHeight and longFormHeight within your PanModalPresentable implementation. Use PanModalHeight values like .contentHeight(CGFloat) or .maxHeightWithTopInset(CGFloat).

    var shortFormHeight: PanModalHeight {
        return .contentHeight(300)
    }
    
    var longFormHeight: PanModalHeight {
        return .maxHeightWithTopInset(40)
    }
  4. Update PanModal layout at runtime

    master

    Because height values are stored during presentation, you must call panModalSetNeedsLayoutUpdate() if you change height properties at runtime to trigger a layout refresh. You can also use panModalTransition(to:) to switch between states like .shortForm or .longForm.

    func viewDidLoad() {
        hasLoaded = true
    
        panModalSetNeedsLayoutUpdate()
        panModalTransition(to: .shortForm)
    }
    
    var shortFormHeight: PanModalHeight {
        if hasLoaded {
            return .contentHeight(200)
        }
        return .maxHeight
    }
  5. Conform to PanModalPresentable

    master

    To use PanModal's customization features, make your UIViewController conform to PanModalPresentable. At a minimum, you can implement panScrollable to return an optional UIScrollView.

    extension YourViewController: PanModalPresentable {
    
        var panScrollable: UIScrollView? {
            return nil
        }
    }