Last active
August 29, 2015 14:14
-
-
Save MrOnyancha/57a50cc013b8e6c05623 to your computer and use it in GitHub Desktop.
designer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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