Polymerjs paper-button元素 _Polymerjs元素

【Polymerjs paper-button元素】Polymerjs paper-button是一个简单的按钮, 从接触点起具有波纹效果。要在目录中显示纸张按钮, 应在命令提示符下使用以下命令。

bower install --save PolymerElements/paper-button

文章图片
例子
以下示例指定在Polymer.js中使用paper-button元素。创建一个index.html文件, 并在其中添加以下代码。

< !doctype html> < html> < head> < link rel = 'import' href = 'http://www.srcmini.com/my-app.html'> < /head> < body> < h2> Paper-Button Example< /h2> < 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-button/paper-button.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/paper-styles/paper-styles.html"> < dom-module id = 'my-app'> < template> < div class = "container"> < paper-button toggles raised class = "green"> Active< /paper-button> < paper-button disabled class = "disabled"> Disabled< /paper-button> < /div> < div class = "container" > < /div> < style is = "custom-style"> #container { display: flex; } paper-button { font-family: 'Roboto', 'Noto', sans-serif; font-weight: normal; font-size: 14px; -webkit-font-smoothing: antialiased; } paper-button.green:hover { background-color: var(--paper-green-400); } paper-button.green { background-color: var(--paper-green-500); color: white; } paper-button.green[active] { background-color: var(--paper-red-500); } paper-button.disabled { color: black; background-color:#969696; } < /style> < /template> < script> Polymer ({ is: 'my-app', ready: function() { this.async(function() { }); } }); < /script> < /dom-module>

输出