Directory

← Back

grain-responsive-behavior

(no summary available)

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/daKmoR/grain-responsive-behavior on 2019-05-10 ]

Polymer Version

<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

Compatibility

(Loading compatibility data...)

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

grain-responsive-behavior - Vaadin Add-on Directory

(no summary available) grain-responsive-behavior - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/daKmoR/grain-responsive-behavior](https://github.com//daKmoR/grain-responsive-behavior/blob/v0.8.1/README.md) on 2019-05-10 ]** [![Polymer Version](https://img.shields.io/badge/polymer-v2-blue.svg)](https://www.polymer-project.org) # \ 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 ```sh $ bower install --save daKmoR/grain-responsive-behavior ``` ## Getting Started Import the package. ```html ``` Create your element using this behavior. You can now access is-mobile, is-tablet, is-desktop. ```js 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'); ```js 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](https://www.npmjs.com/package/polymer-cli) installed. * View the Element via `polymer serve` * Run tests via `polymer test`
Online