Cupertino Pane is great modern slide-over pane with touch technologies. Right like in Apple Maps, Apple Stocks, Apple Music and other modern apps.
Lightweight, Multiplatform, Open Source. For progressive applications.
- Demonstration
- Supporting platforms
- Getting Started
- Settings
- Public Methods
- Attributes
- Future Goals
- Contributing
- License
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
- Chrome on Android, Windows, macOS, and Linux
- Firefox on Windows, macOS, and Linux
- Safari on iOS
- iOS WkWebView on iOS
- Android WebView on Android
npm install cupertino-paneIf you don't want to include Cupertino Pane files in your project, you may use it from CDN. The following files are available:
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.js"></script>
<script src="https://unpkg.com/cupertino-pane/dist/cupertino-pane.min.js"></script><!DOCTYPE html>
<html lang="en">
<body>
...
<script src="path/to/cupertino-pane.min.js"></script>
</body>
</html><div class="cupertino-pane">
<h1>Header</h1>
<div class="content">Content</div>
</div>.cupertino-pane {
margin: 20px;
}<body>
...
<script>
window.onload = function () {
var myPane = new CupertinoPane(
'.cupertino-pane', // Pane container selector
{
parentElement: 'body', // Parent container
breaks: {
top: { enabled: false, offset: -70 },
middle: { enabled: true, offset: 0 },
bottom: { enabled: true, offset: 0 },
},
onDrag: () => console.log('Drag event')
}
);
myPane.present({animate: true});
};
</script>
</body>$(document).ready(function () {
//initialize pane when document ready
var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
myPane.present();
});Cupertino Pane package comes with ES module version which can be used where supported or with bundlers like Webpack or Rollup:
import { CupertinoPane } from 'cupertino-pane';
var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
myPane.present();parentElement| string | Element selector where pane will appended (by default using parent element where html layout placed)initialBreak| (top|middle|bottom): 'middle' | Initial pane positiondarkMode| boolean: false | Initial pane stylesbackdrop| boolean: false | Dimmed overlay will rendered with pane iftruebackdropTransparent| boolean: false | Dimmed overlay will rendered with zero opacityanimationType| (ease | ease-in | ease-out | ease-in-out | cubic-bezier): 'ease' | Transition property animation typeanimationDuration| number: 300 | Transition property durationbottomClose| boolean: false | Close pane with drag to bottom breakpointfreeMode| boolean: false | Ontruewill remove automatical magnetic effects to near breakpoint.buttonClose| boolean: true | Determinate whetever close button will render or nottopperOverflow| boolean: true | Ability to scroll content inside pane if topper point reachedtopperOverflowOffset| number: 0 | Offset from screen bottom to the end of overflow contentshowDraggable| boolean: true | Render rectangular shape on the top of paneclickBottomOpen| boolean: true | If bottom position reached, simple click to pane will open pane to the next upper pointsimulateTouch| boolean: true | Simulate touch events for DesktoppassiveListeners| boolean: true | (Indicates that the function specified by listener will never call preventDefault())
breaks| {} | Using to override default pane breakpoints. Note that necessary to define all three breakpoints when override, with newenabledandoffsetif needs.top| {} | Topper point that pane can reachenabled| boolean: true | Enable or disable breakpointoffset| number: 0 | Additional bottom margin if needs
middle| {} | Middle point that pane can reachenabled| boolean: true | Enable or disable breakpointoffset| number: 0 | Additional bottom margin if needs
bottom| {} | Bottom point that pane can reachenabled| boolean: true | Enable or disable breakpointoffset| number: 0 | Additional bottom margin if needs
The function that executes when the event fires.
onDidDismiss| void: () => {} | Call after pane will dissapearedonWillDismiss| void: () => {} | Call before pane will dissapearedonDidPresent| void: () => {} | Call after pane will presentonWillPresent| void: () => {} | Call before panel will presentonDragStart| void: () => {} | Call when detect user drag event on paneonDrag| void: () => {} | Call executes on each new pane positiononBackdropTap| void: () => {} | Call when user tap backdrop overlay
Will render pane DOM and show pane with setted params.
myPane.present();Will change pane position with animation to selected breakpoint.
myPane.moveToBreak('top');Dissappear pane from screen, still keep pane in DOM.
myPane.hide();Remove pane from DOM and clear styles
myPane.destroy();isHidden()
Determinate if pane position was moved out of screen, but pane still exist in DOM. true - in DOM but not visible, false - in DOM and visible, null - not rendered
if (myPane.isHidden()) {
myPane.moveToBreak('top');
}Set for element to automaticaly hide on reach bottom breakpoint.
<div class="cupertino-pane">
<h1>Header</h1>
<div class="content" hide-on-bottom>Content</div>
</div>Set for element with overflow ability. By default using for full pane area, but in some cases good useful with header.
<div class="cupertino-pane">
<h1>Header</h1>
<div class="content" overflow-y>Content</div>
</div>- Hardware accelerated drag&drop actions
- Realistic easy-in-out transitions
- Using in 3 popular mobile frameworks
We welcome contributions of all kinds from anyone.
If you've noticed a bug or have a question, make an issue, we'll try to answer it as fast as possible.
If this is something you think you can fix, then fork Cupertino Pane and create a branch.
# Create new branch
git checkout -b my_issue
# Then we install the dependencies
npm install# Make bundles
gulp buildThis will output the files into the dist directory.
Push your changes to a topic branch in your fork of the repository. Submit a pull request to the repository. It can take several days before we can review the code you've submitted.
Licensed under the MIT License. View license.