Product
Socket Now Supports uv.lock Files
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
By Trevor Norris - Jan 09, 2025
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
cupertino-pane
Advanced tools
Cupertino Pane
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
Demonstration
Supporting platforms
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
Getting Started
Install via NPM
npm install cupertino-pane
Use from CDN
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>
Include Files To App/Website
<!DOCTYPE html>
<html lang="en">
<body>
...
<script src="path/to/cupertino-pane.min.js"></script>
</body>
</html>
Add HTML Layout
<div class="cupertino-pane">
<h1>Header</h1>
<div class="content">Content</div>
</div>
Additional CSS Styles
.cupertino-pane {
margin: 20px;
}
Initialize Cupertino Pane
<body>
...
<script>
window.onload = function () {
var myPane = new CupertinoPane(
'.cupertino-pane', // Pane container selector
{
parentElement: 'body', // Parent container
initialShow: false,
breaks: {
top: { enabled: false, offset: -70 },
middle: { enabled: true, offset: 0 },
bottom: { enabled: true, offset: 0 },
},
onDrag: () => console.log('Drag event')
}
);
myPane.present();
};
</script>
</body>
jQuery example
$(document).ready(function () {
//initialize pane when document ready
var myPane = new CupertinoPane('.cupertino-pane', { /* ... */ });
myPane.present();
});
As an ES module
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();
Settings
Common configuration
parentElement| string | Element selector where pane will appended (by default using parent element where html layout placed)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 iftruebackdropClose| 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 | 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 point
Breakpoints
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
Callbacks
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 position
Public Methods
present()
Will render pane DOM and show pane with setted params.
myPane.present();
moveToBreak('top' | 'middle' | 'bottom')
Will change pane position with animation to selected breakpoint.
myPane.moveToBreak('top');
hide()
Dissappear pane from screen, still keep pane in DOM.
myPane.hide();
isHidden
Determinate if pane position was moved out of screen, but pane still exist in DOM.
if (myPane.isHidden) {
myPane.moveToBreak('top');
}
Attributes
hide-on-bottom
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>
Future Goals
- Create component for Ionic Framework using stencil
- Hardware accelerated drag&drop actions
- Realistic easy-in-out transitions
- Work out the state with overflow-x
- Using in all popular mobile frameworks
Contributing
We welcome contributions of all kinds from anyone.
1. Where do I go from here?
If you've noticed a bug or have a question, make an issue, we'll try to answer it as fast as possible.
2. Fork & Create a branch
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
3. Changes & Build
# Make bundles
gulp build
This will output the files into the dist directory.
4. Push changes
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.
License
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,161 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.
Package last updated on 27 Dec 2019
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.
Related posts
Research
Security News
Gmail For Exfiltration: Malicious npm Packages Target Solana Private Keys and Drain Victims' Wallets
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.
By Kirill Boychenko - Jan 08, 2025
Security News
New Python Packaging Proposal Aims to Solve Phantom Dependency Problem with SBOMs
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
By Sarah Gooding - Jan 07, 2025