CODEWITHSUNDEEP
polymer
RobertW
RobertW

Reputation: 1121

paper-menu-button - how read selected menu item

I'm searching for understanding how polymer works. How can I handle selecting menu item from list form that markup ?

<paper-menu-button icon="menu">
 <div>kg</div>
 <div>pcs</div>
 <div>lt</div>
</paper-menu-button>

Upvotes: 1

Views: 1583

Answers (1)

Dirk Grappendorf
Dirk Grappendorf

Reputation: 3422

Here is an example for a popup menu that binds event functions to the menu items. It uses paper-items instead of divs, but divs would work as well.

<!doctype html>
<html>
<head>

    <script src="../lib/platform/platform.js"></script>
    <link href="../lib/core-icons/core-icons.html" rel="import">
    <link href="../lib/paper-menu-button/paper-menu-button.html" rel="import">
    <link href="../lib/paper-item/paper-item.html" rel="import">

</head>

<body unresolved>

    <polymer-element name="my-menu">
        <template>
            <paper-menu-button icon="menu">
                <paper-item on-tap="{{refresh}}">Refresh</paper-item>
                <paper-item on-tap="{{help}}">Help</paper-item>
                <paper-item on-tap="{{signOut}}">Sign out</paper-item>
            </paper-menu-button>
        </template>

        <script>
            Polymer('my-menu', {
                refresh: function () { console.log('Refresh'); },
                help: function () { console.log('Help'); },
                signOut: function () { console.log('Sign out'); }
            });
        </script>
    </polymer-element>

    <my-menu></my-menu>

</body>

</html>

Upvotes: 4

Related Questions