cupertino-pane
Advanced tools
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.
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
npm install cupertino-pane
If 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 if truebackdropClose | boolean: false | Close pane with click to backdrop elementanimationType | (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 | On true will 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 new enabled and offset if needs.
top | {} | Topper point that pane can reach
enabled | boolean: true | Enable or disable breakpointoffset | number: 0 | Additional bottom margin if needsmiddle | {} | Middle point that pane can reach
enabled | boolean: true | Enable or disable breakpointoffset | number: 0 | Additional bottom margin if needsbottom | {} | Bottom point that pane can reach
enabled | boolean: true | Enable or disable breakpointoffset | number: 0 | Additional bottom margin if needsThe 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 positionWill 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();
Determinate if pane position was moved out of screen, but pane still exist in DOM.
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>
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 build
This 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.
FAQs
Cupertino Panes is multi-functional modals, cards & panes with touch technologies.
The npm package cupertino-pane receives a total of 5,715 weekly downloads. As such, cupertino-pane popularity was classified as popular.
We found that cupertino-pane demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.