Rishabh Mishra
Rishabh Mishra

Reputation: 508

How to use Polymer paper-menu-button inside paper-toolbar?

i want to create a dropdown menu and add logout button in toolbar. But paper-menu-button is not working inside paper-toolbar.

  <paper-toolbar id="order-toolbar">
        <template is="dom-if" if="[[ showHome ]]">
          <img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
        </template>
        <template is="dom-if" if="[[ !showHome ]]">
          <iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
        </template>
        <h2 class="orders-heading">Store owner</h2>
        <paper-menu-button>
          <paper-icon-button id="header-menu-button" icon="more-vert" slot="dropdown-trigger"></paper-icon-button>
          <paper-listbox slot="dropdown-content">
            <paper-item>Share</paper-item>
            <paper-item>Settings</paper-item>
            <paper-item>Help</paper-item>
          </paper-listbox>
        </paper-menu-button>
      </paper-toolbar>

Upvotes: 0

Views: 309

Answers (1)

Ryan Leach
Ryan Leach

Reputation: 4470

<paper-toolbar id="order-toolbar">
  <template is="dom-if" if="[[ showHome ]]">
    <img class="header-logo" on-tap="tileTapped" src="assets/paisool-logo.svg">
  </template>
  <template is="dom-if" if="[[ !showHome ]]">
    <iron-icon id="back-arrow" class="header-logo" icon="arrow-back" on-tap="tileTapped"></iron-icon>
  </template>
  <h2 class="orders-heading">Store owner</h2>
  <paper-menu-button>
    <paper-icon-button id="header-menu-button" icon="more-vert" class="dropdown-trigger">
    </paper-icon-button>
    <paper-listbox slot="dropdown-content">
      <paper-item>Share</paper-item>
      <paper-item>Settings</paper-item>
      <paper-item>Help</paper-item>
    </paper-listbox>
  </paper-menu-button>
</paper-toolbar>

I notice you are using slot="dropdown-trigger". Try using class="dropdown-trigger". I think slot must be from Polymer 2.0?

Upvotes: 1

Related Questions