Polymerjs paper-card元素 _Polymerjs元素

Polymerjs 纸卡是具有唯一相关数据的简单材料设计纸。要在你的目录中获得纸卡, 应在命令提示符下使用以下命令。

bower install --save PolymerElements/paper-card

文章图片
例子
创建一个index.html文件, 并在其中添加以下代码, 以查看Polymer.js中纸卡元素的使用。

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

【Polymerjs paper-card元素】现在, 打开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-button/paper-button.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-styles/paper-styles.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-card/paper-card.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/iron-icons/iron-icons.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/iron-icons/communication-icons.html"> < dom-module id = 'my-app'> < template> < style is = "custom-style"> body {display: flex; align-items: center; justify-content: center; }paper-card {max-width: 500px; }.cafe-header { @apply(--paper-font-headline); }.cafe-light { color: var(--paper-grey-600); }.cafe-location {float: right; font-size: 15px; vertical-align: middle; }.cafe-reserve { color: var(--google-blue-500); }iron-icon.star {--iron-icon-width: 16px; --iron-icon-height: 16px; color: var(--paper-amber-500); }< /style> < paper-card > < div class = "card-content"> < div class = "cafe-header"> srcmini< /div> < div class = "cafe-rating"> < iron-icon class = "star" icon = "star"> < /iron-icon> < iron-icon class = "star" icon = "star"> < /iron-icon> < iron-icon class = "star" icon = "star"> < /iron-icon> < iron-icon class = "star" icon = "star"> < /iron-icon> < iron-icon class = "star" icon = "star"> < /iron-icon> < /div> < p> Free Tutorials< /p> < p class = "cafe-light"> srcmini is a platform for all technologies.< /p> < /div> < /paper-card> < /template> < script> Polymer ({is: 'my-app', ready: function() {this.async(function() {}); }}); < /script> < dom-module>

输出