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.
let settings = {
breaks: {
top: {
enabled: true,
offset: window.screen.height - (135 * 0.35)
},
middle: {
enabled: true,
offset: 410 // 410 pixels from screen bottom until pane top vertex
}
}
}
};
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: {
middle: { enabled: true, offset: 300 },
bottom: { enabled: true, offset: 80 },
},
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 truebackdropTransparent | 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 | 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 pointdragByCursor | boolean: false | Drag pane only with draggabale top cursorsimulateTouch | 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.
top | {} | Topper point that pane can reach
enabled | boolean: true | Enable or disable breakpointoffset | number: window.screen.height - (135 * 0.35) | Additional bottom margin if needsmiddle | {} | Middle point that pane can reach
enabled | boolean: true | Enable or disable breakpointoffset | number: 300 | Additional bottom margin if needsbottom | {} | Bottom point that pane can reach
enabled | boolean: true | Enable or disable breakpointoffset | number: 100 | 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 positiononBackdropTap | void: () => {} | Call when user tap backdrop overlayWill 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. true - in DOM but not visible, false - in DOM and visible, null - not rendered
if (myPane.isHidden()) {
myPane.moveToBreak('top');
}
Method return current break position in text format ('top' | 'middle' | 'bottom)
if (myPane.currentBreak() === 'top') {
myPane.moveToBreak('bottom');
}
Method disable any drag actions for pane
myPane.disableDrag();
Method enable any drag actions for pane
myPane.enableDrag();
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,388 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.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.