Skip to content

Instantly share code, notes, and snippets.

@MrOnyancha
Last active Aug 29, 2015
Embed
What would you like to do?
designer
Skip to content
This repository
Explore
Gist
Blog
Help
Onyancha Chrispinus chrisp22
45 Watch
Star 10
Fork 10Polymer/paper-dropdown-menu
branch: master paper-dropdown-menu/demo.html
Yvonne Yipmorethanreal on Dec 8, 2014 demo: add example in an overlay
3 contributors Yvonne YipJacob MacDonaldDaniel Freedman
212 lines (161 sloc) 5.171 kb RawBlameHistory
<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>paper-dropdown-menu</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../paper-dropdown/paper-dropdown.html" rel="import">
<link href="../paper-item/paper-item.html" rel="import">
<link href="paper-dropdown-menu.html" rel="import">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-size: 14px;
margin: 0;
padding: 24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
html /deep/ paper-dropdown-menu {
box-sizing: border-box;
width: 170px;
}
html /deep/ core-menu {
box-sizing: border-box;
width: 170px;
}
paper-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html /deep/ core-collapse {
border: 1px solid #ccc;
padding: 8px;
}
html /deep/ core-overlay {
border: 1px solid #ccc;
padding: 8px;
background: #fff;
}
.constrained-height {
height: 150px;
}
.colored {
color: #0f9d58;
}
.dropdown.colored::shadow #ripple,
.dropdown.colored::shadow #background {
border: 1px solid #0f9d58;
background-color: #b7e1cd;
}
</style>
</head>
<body>
<template is="auto-binding">
<section>
<div>Absolutely positioned dropdowns</div>
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<paper-dropdown-menu label="Disabled" disabled>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Should not see this</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</section>
<section>
<div>Layered dropdowns</div>
<button onclick="document.getElementById('overlay').toggle()">toggle core-overlay</button>
<core-overlay id="overlay">
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown layered class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</core-overlay>
<button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
<br>
<core-collapse id="collapse">
<paper-dropdown-menu label="Your favorite pastry">
<paper-dropdown layered class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</core-collapse>
</section>
<section>
<div>Custom styling</div>
<paper-dropdown-menu label="Constrained height">
<paper-dropdown class="dropdown constrained-height">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<paper-dropdown-menu label="Colored">
<paper-dropdown class="dropdown colored">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</section>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut',
'Financier',
'Jello',
'Madeleine',
'Pound cake',
'Pretzel',
'Sfogliatelle'
];
</script>
</body>
</html>
Status API Training Shop Blog About
© 2015 GitHub, Inc. Terms Privacy Security Contact
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment