Polymerjs paper-dropdown下拉菜单 _下拉菜单

“ Polymerjs “ 纸张下拉菜单是一个简单的下拉菜单, 用于处理可选内容。使用以下命令将该元素安装在你的项目目录中, 并在你的应用程序中使用。

bower install --save PolymerElements/paper-dropdown-menu

文章图片

bower install --save PolymerElements/paper-item

文章图片

bower install --save PolymerElements/paper-listbox

文章图片
例子
【Polymerjs paper-dropdown下拉菜单】创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中paper-dropdown-menu元素的使用。

< !doctype html> < html> < head> < link rel = 'import' href = 'http://www.srcmini.com/my-app.html'> < /head> < body> < my-app> < /my-app> < /body> < /html>

现在, 打开my-app.html文件, 并在其中包含以下代码。

< link rel = 'import' href='http://www.srcmini.com/bower_components/polymer/polymer.html'> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-item/paper-item.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-listbox/paper-listbox.html"> < dom-module id = 'my-app'> < template> < style is = "custom-style"> paper-dropdown-menu {width:250px; }paper-dropdown-menu {height: 200px; display: block; }< /style> < h3> Paper-Dropdown-Menu Example < /h3> < paper-dropdown-menu> < paper-listbox class = "dropdown-content" selected = "1"> < paper-item> Java Tutorial< /paper-item> < paper-item> C Tutorial< /paper-item> < paper-item> PHP Tutorial< /paper-item> < paper-item> C++ Tutorial< /paper-item> < /paper-listbox> < /paper-dropdown-menu> < /template> < script> Polymer ({is: 'my-app', ready: function() {this.async(function() {}); }}); < /script> < /dom-module>

输出