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">
<div class="cupertino-header">
Header
</div>
<div class="cupertino-content">
Content
</div>
</div>
.cupertino-pane-wrapper .pane {
background: #ffffff;
}
.cupertino-header,
.cupertino-content {
margin: 20px;
}
<body>
...
<script>
window.onload = function () {
var myPane = new CupertinoPane(
'.cupertino-pane', // Pane container selector
{
initialShow: false,
buttonClose: false,
breaks: {
top: { enabled: false, offset: -70 },
middle: { enabled: true, offset: 0 },
bottom: { enabled: true, offset: 0 },
},
onDrag: () => console.log('Drag event')
}
);
};
</script>
</body>
$(document).ready(function () {
//initialize pane when document ready
var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
});
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 Swiper('.cupertino-pane', { /* ... */ });
initialShow | boolean: false | Determinate if pane will rendered with animation or immediatelyinitialBreak | (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 pointbreaks | {} | 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 positionWe 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.
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
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.