https://github.com/polymerelements/paper-behaviors
Common behaviors used across paper-* elements.
https://github.com/polymerelements/paper-behaviors
Last synced: 10 months ago
JSON representation
Common behaviors used across paper-* elements.
- Host: GitHub
- URL: https://github.com/polymerelements/paper-behaviors
- Owner: PolymerElements
- Created: 2015-04-17T20:40:05.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T18:04:25.000Z (over 2 years ago)
- Last Synced: 2024-05-09T10:09:35.739Z (about 2 years ago)
- Language: HTML
- Homepage:
- Size: 351 KB
- Stars: 19
- Watchers: 17
- Forks: 27
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@polymer/paper-behaviors)
[](https://travis-ci.org/PolymerElements/paper-behaviors)
[](https://webcomponents.org/element/@polymer/paper-behaviors)
## <paper-behaviors>
`` is a set of behaviours to help implement Material Design elements:
- `PaperCheckedElementBehavior` to implement a custom element
that has a `checked` property similar to `IronCheckedElementBehavior`
and is compatible with having a ripple effect.
- `PaperInkyFocusBehavior` implements a ripple when the element has keyboard focus.
- `PaperRippleBehavior` dynamically implements a ripple
when the element has focus via pointer or keyboard. This behavior is intended to be used in conjunction with and after
`IronButtonState` and `IronControlState`.
See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-behaviors),
[Demo](https://www.webcomponents.org/element/@polymer/paper-behaviors/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/paper-behaviors
```
### Example of using one of the behaviours in a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {PaperButtonBehavior} from '@polymer/paper-behaviors/paper-button-behavior.js';
class SampleElement extends mixinBehaviors([PaperButtonBehavior], PolymerElement) {
static get template() {
return html`
:host {
display: block;
}
/* Some properties inherited from the behaviour */
:host([disabled]) {
background-color: grey;
pointer-events: none;
}
:host([active]),
:host([pressed]) {
background-color: blue;
}
I am a ripple-y button
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/paper-behaviors
cd paper-behaviors
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```