CODEWITHSUNDEEP
javascriptpolymerpolymer-2.x
Sabrina
Sabrina

Reputation: 33

Writing a method for a custom element in Polymer 2.0?

I'm new to Polymer.js and I'm trying to implement an app-drawer; this is what I have so far:

<app-header reveals>
  <app-toolbar>
    <paper-icon-button icon="menu" on-tap="_toggleDrawer"></paper-icon-button>
    <div main-title>Title</div>
    <paper-icon-button icon="search"></paper-icon-button>
  </app-toolbar>
</app-header>

<app-drawer id="drawer" opened={{drawerOpened}} swipe-open tabindex="0">
</app-drawer>

(<paper-icon-button icon="menu" onclick="drawer.toggle()"> did not work 1)

.

class MyDrawer extends Polymer.Element {
  static get is() { return 'my-drawer'; }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-drawer'
      }
    };
  }

}

Assuming this toggle method is correct:

_toggleDrawer: function() {
  this.drawerOpened = !this.drawerOpened;
}

, what's the correct syntax for Polymer 2.0 and where exactly do I place this method?

Or is there a simpler way to toggle the drawer?

Thank you!

Upvotes: 0

Views: 123

Answers (2)

Frank R.
Frank R.

Reputation: 1842

Add drawer-toggle attribute to your <paper-icon-button>

<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>

Upvotes: 0

Ofisora
Ofisora

Reputation: 2737

You have to place the function inside the class that extends the Polymer.Element base class.

In Polymer 2 you can define a function as:

functionName(parameters if any){
   //definition goes here
}

Note: If you use a single underscore (_functionName), it will be a protected method or function and if you use double underscore (__functionName) it will be the private method or function to the class.

In your code above, you can simply add the function inside class:

class MyDrawer extends Polymer.Element {

  static get is() { return 'my-drawer'; }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-drawer'
      }
    };
  }

  _toggleDrawer() {
      this.drawerOpened = !this.drawerOpened;
  }

}

Upvotes: 1

Related Questions