grain-responsive-behavior
(no summary available)
[ This description is mirrored from README.md at github.com/daKmoR/grain-responsive-behavior on 2019-05-10 ]
<grain-responsive-behavior>
Every element implementing this behavior do get an attribute for is-mobile, is-tablet, is-desktop when you resize the window. You can use this information to change styles and/or attributes depending on it.
Installation
$ bower install --save daKmoR/grain-responsive-behavior
Getting Started
Import the package.
<link rel="import" href="/bower_components/grain-responsive-behavior/grain-responsive-behavior.html">
Create your element using this behavior. You can now access is-mobile, is-tablet, is-desktop.
class GrainResponsiveBehaviorExample extends GrainResponsiveBehavior(Polymer.Element) {
// your code
}
If you wish to have an responsive attribute you should create 3 attributes foo, mobileFoo, tabletFoo and init the Behavior with `this.initResponsiveBehaviorFor('foo');
class GrainResponsiveBehaviorExample extends GrainResponsiveBehavior(Polymer.Element) {
static get is() { return 'grain-responsive-behavior-example' }
static get properties() {
return {
marked: {
type: String,
reflectToAttribute: true,
value: 'false', // 'true', 'false'
},
mobileMarked: { type: String, reflectToAttribute: true },
tabletMarked: { type: String, reflectToAttribute: true },
};
}
constructor() {
super();
this.initResponsiveBehaviorFor('marked');
}
}
For more information, see the API documentation.
Working on the Element
First, make sure you have the Polymer CLI installed.
- View the Element via
polymer serve
- Run tests via
polymer test
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
Polymer/polymer#>=2.0.0-rc.2 <3.0
- Released
- 2017-04-30
- Maturity
- TESTED
- License
- Other
Compatibility
- Framework
- Polymer 1.0+
- Polymer 2.0+ in 0.8.0
- Browser
- Browser Independent