Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/motss/paper-swipe
A swipeable element built with Polymer 1.2
https://github.com/motss/paper-swipe
polymer swipeable-cards webcomponents
Last synced: 2 days ago
JSON representation
A swipeable element built with Polymer 1.2
- Host: GitHub
- URL: https://github.com/motss/paper-swipe
- Owner: motss
- License: mit
- Created: 2015-07-31T14:07:35.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-27T10:12:15.000Z (about 8 years ago)
- Last Synced: 2024-09-11T11:33:05.691Z (22 days ago)
- Topics: polymer, swipeable-cards, webcomponents
- Language: HTML
- Homepage: https://motss.github.io/paper-swipe/components/paper-swipe/
- Size: 4.96 MB
- Stars: 30
- Watchers: 5
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](http://badge.fury.io/gh/motss%2Fpaper-swipe)
[](http://badge.fury.io/bo/paper-swipe)
# paper-swipe
## Update (1.0.0)
Highlights of v1.0.0:
- Added `fade` attribute for simple fade in/ fade out effect when swiping.
- Removed `resetSwipe` attribute which is redundant and being taken care by new method `resetPosition()`.
- Fixed layout issue on Safari Mobile.
- Added custom mixins to style the element.
- Prettier demo.
- Code restructured.
See the [component page](http://motss.github.io/paper-swipe/components/paper-swipe/) for more information.
`paper-swipe` provides enables swipe gestures to swipe content to either the left or the right to unveil the underlay
behind it.
Example:
By default, it can be swiped to either the left or the right.
Swipe Gestures disabled
Swipe with fade in/ fade out effect
Only Left Swipe
Only Right Swipe
Tap Event Handler
Panel is now at the edge of the screen
`paper-swipe` allows user to use the custom DOM in the body to create basically any contents and it has two different
sections which allows the customization by using the `content` and `underlay` attributes:
Example:
Underlay content goes here...
Content of swiping element goes here...
## Event handling
`paper-swipe` has been added some features to fire certain events such as `tap-underlay` and `edge` so that user can
make use of it to perform additional functions as you like:
Example:
Underlay content goes here...
Fire `edge` event when the panel is at the edge of the screen...
Underlay content goes here...
Fire `tap-underlay` event when the panel is being clicked...
There are two ways to disable the swiping on the content panel by using `on-tap-underlay` or `on-click` event handler:
Example:
Click to reset the panel from the edge to its origin...
Swipe to remove the panel...
Click to reset the panel from the edge to its origin...
Swipe to remove the panel...
## Styling
Note, it's important that specifying explicit height to the `paper-swipe` will render both the `content` and `underlay` layers to have the same height. Especially when multiple `paper-swipe` on the same document, explicit height will make all elements look consistent.
paper-swipe {
height: 100px;
}
paper-swipe {
--paper-swipe: {
height: 100px;
};
}
The following custom properties and mixins are also available for styling:
Custom mixin | Description | Default
----------------|-------------|----------
`--paper-swipe` | `Mixin applied to paper-swipe` | `{}`
`--paper-swipe-swipeable-container` | `Mixin applied to paper-swipe-swipeable-container` | `{}`
`--paper-swipe-content` | `Mixin applied to swipeable content` | `{}`
`--paper-swipe-underlay` | `Mixin applied to underlay beneath the swipeable content` | `{}`
## Demo + boilerplate generator
[paper-swipe demo + boilerplate generator](http://motss.github.io/paper-swipe/components/paper-swipe/demo/index.html)
## Getting Started
1. Install with bower
`bower install --save paper-swipe`
2. Load the web component and the dependencies
```html
```
3. Markup with <paper-swipe></paper-swipe>
4. Done
### Supported Browsers
[Same as Polymer](http://www.polymer-project.org/resources/compatibility.html)