CODEWITHSUNDEEP
polymerpolymer-1.0
Eron Castro
Eron Castro

Reputation: 233

paper-menu-button is not displayed inside a paper-toolbar

I am very new to Polymer and I was trying use a paper-menu-button inside a paper-toolbar, to reproduce what was shown by Kevin Schaaf on Polymer Summit 2015, but it turns out that the element is not shown. Bellow is my code:

<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">

<dom-module id="input-header">
  <template>
    <paper-toolbar>
      <paper-icon-button icon="mail"></paper-icon-button>
      <div>{{title}}</div>
      <paper-menu-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
        <paper-input label="Thread name:" value="{{title}}"></paper-input>
      </paper-menu-button>
    </paper-toolbar>
  </template>

  <script>
    Polymer({
      is: 'input-header',
      properties: {
        label: {
          type: String,
          notify: true
        }
      }
    });
  </script>
</dom-module>

What Am I doing wrong? Thanks in advance.

Upvotes: 1

Views: 385

Answers (2)

Jacob Miles
Jacob Miles

Reputation: 206

The classes are important. Also you don't have a paper-menu with the dropdown-content class defined. I'm not sure about having paper-input???

<paper-menu-button>
  <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
  <paper-menu class="dropdown-content">
    <paper-item>Share</paper-item>
    <paper-item>Settings</paper-item>
    <paper-item>Help</paper-item>
  </paper-menu>
</paper-menu-button>

Upvotes: 2

Kuba Šimonovsk&#253;
Kuba Šimonovsk&#253;

Reputation: 2043

I have no idea what you are trying. Using paper-input inside paper-menu-button which should show some items doesn't make point for me, but anyway, if you want to see paper-icon-button inside paper-menu-button you have to add dropdown-trigger class.

Code should be:

   <paper-toolbar>
      <paper-icon-button icon="mail"></paper-icon-button>
      <div>{{title}}</div>
      <paper-menu-button>
        <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
        <paper-input label="Thread name:" value="{{title}}"></paper-input>
      </paper-menu-button>
    </paper-toolbar>

paper-menu-button should have some dropdown content so that's why i don't get it.

Maybe use some wrap div around paper-icon-button and paper-input and set dropdown-trigger class to it

Upvotes: 0

Related Questions