You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

146 lines
4.7 KiB

  1. ### PanModal is an elegant and highly customizable presentation API for constructing bottom sheet modals on iOS.
  2. <p align="center">
  3. <img src="https://github.com/slackhq/PanModal/raw/master/Screenshots/panModal.gif" width="30%" height="30%" alt="Screenshot Preview" />
  4. </p>
  5. <p align="center">
  6. <img src="https://img.shields.io/badge/Platform-iOS_10+-green.svg" alt="Platform: iOS 10.0+" />
  7. <a href="https://developer.apple.com/swift" target="_blank"><img src="https://img.shields.io/badge/Language-Swift_5-blueviolet.svg" alt="Language: Swift 5" /></a>
  8. <a href="https://cocoapods.org/pods/PanModal" target="_blank"><img src="https://img.shields.io/badge/CocoaPods-v1.0-red.svg" alt="CocoaPods compatible" /></a>
  9. <a href="https://github.com/Carthage/Carthage" target="_blank"><img src="https://img.shields.io/badge/Carthage-compatible-blue.svg" alt="Carthage compatible" /></a>
  10. <img src="https://img.shields.io/badge/License-MIT-green.svg" alt="License: MIT" />
  11. </p>
  12. <p align="center">
  13. <a href="#features">Features</a>
  14. <a href="#compatibility">Compatibility</a>
  15. <a href="#installation">Installation</a>
  16. <a href="#usage">Usage</a>
  17. <a href="#documentation">Documentation</a>
  18. <a href="#contributing">Contributing</a>
  19. <a href="#authors">Authors</a>
  20. <a href="#license">License</a>
  21. </p>
  22. <p align="center">
  23. Read our <a href="https://slack.engineering/panmodal-better-support-for-thumb-accessibility-on-slack-mobile-52b2a7596031" target="_blank">blog</a> on how Slack is getting more :thumbsup: with PanModal
  24. Swift 4.2 support can be found on the `Swift4.2` branch.
  25. </p>
  26. ## Features
  27. * Supports any type of `UIViewController`
  28. * Seamless transition between modal and content
  29. * Maintains 60 fps performance
  30. ## Compatibility
  31. PanModal requires **iOS 10+** and is compatible with **Swift 4.2** projects.
  32. ## Installation
  33. * <a href="https://guides.cocoapods.org/using/using-cocoapods.html" target="_blank">CocoaPods</a>:
  34. ```ruby
  35. pod 'PanModal'
  36. ```
  37. * <a href="https://github.com/Carthage/Carthage" target="_blank">Carthage</a>:
  38. ```ruby
  39. github "slackhq/PanModal"
  40. ```
  41. ## Usage
  42. PanModal was designed to be used effortlessly. Simply call `presentPanModal` in the same way you would expect to present a `UIViewController`
  43. ```swift
  44. .presentPanModal(yourViewController)
  45. ```
  46. The presented view controller must conform to `PanModalPresentable` to take advantage of the customizable options
  47. ```swift
  48. extension YourViewController: PanModalPresentable {
  49. var panScrollable: UIScrollView? {
  50. return nil
  51. }
  52. }
  53. ```
  54. ### PanScrollable
  55. 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
  56. ```swift
  57. class TableViewController: UITableViewController, PanModalPresentable {
  58. var panScrollable: UIScrollView? {
  59. return tableView
  60. }
  61. }
  62. ```
  63. ### Adjusting Heights
  64. Height values of the panModal can be adjusted by overriding `shortFormHeight` or `longFormHeight`
  65. ```swift
  66. var shortFormHeight: PanModalHeight {
  67. return .contentHeight(300)
  68. }
  69. var longFormHeight: PanModalHeight {
  70. return .maxHeightWithTopInset(40)
  71. }
  72. ```
  73. ### Updates at Runtime
  74. Values are stored during presentation, so when adjusting at runtime you should call `panModalSetNeedsLayoutUpdate()`
  75. ```swift
  76. func viewDidLoad() {
  77. hasLoaded = true
  78. panModalSetNeedsLayoutUpdate()
  79. panModalTransition(to: .shortForm)
  80. }
  81. var shortFormHeight: PanModalHeight {
  82. if hasLoaded {
  83. return .contentHeight(200)
  84. }
  85. return .maxHeight
  86. }
  87. ```
  88. ### Sample App
  89. Check out the [Sample App](https://github.com/slackhq/PanModal/tree/master/Sample) for more complex configurations of `PanModalPresentable`, including navigation controllers and stacked modals.
  90. ## Documentation
  91. Option + click on any of PanModal's methods or notes for detailed documentation.
  92. <p align="left">
  93. <img src="https://github.com/slackhq/PanModal/blob/master/Screenshots/documentation.png" width="50%" height="50%" alt="Screenshot Preview" />
  94. </p>
  95. ## Contributing
  96. 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.
  97. 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](https://github.com/slackhq/PanModal/blob/master/CONTRIBUTING.md).
  98. ## Authors
  99. [Stephen Sowole](https://github.com/tun57) • [Tosin Afolabi](https://github.com/tosinaf)
  100. ## License
  101. <b>PanModal</b> is released under a MIT License. See LICENSE file for details.