← 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 ]

<grain-responsive-behavior>

Name: grain-responsive-behavior
Availability: InStock
Rating: 3 (90 reviews)
Author: daKmoR

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)

**[ 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`

Directory