Polymerjs gold-email-input元素

Polymerjs gold-email-input元素是一个简单的文本字段, 用于指定电子邮件地址。在材料设计中设置样式。
句法:

< gold-email-input> < /gold-email-input>

gold-email输入元素具有可选标签, 默认情况下为” email” :
< gold-email-input label = "Your email address"> < /gold-email-input>

验证方式 validate()方法用于手动验证电子邮件地址。如果有效, 则返回true, 否则返回false。你可以使用自动验证和必需属性来使输入自动验证。
例子
运行以下命令以在项目目录中安装gold-email-input元素。之后, 你可以在应用程序中使用此元素:
bower install PolymerElements/gold-email-input -save

Polymerjs gold-email-input元素

文章图片
它将在bower_components文件夹下安装polymer_ gold-email-input的所有相关元素。
创建一个index.html文件并在其中添加以下代码, 以查看Polymer.js中gold-email-input元素的用法。
< !DOCTYPE html> < html> < head> < title> Gold email Input< /title> < meta charset = "utf-8"> < script src = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.min.js"> < /script> < link rel = "import" href = "http://www.srcmini.com/bower_components/polymer/polymer.html"> < link rel = "import" href = "http://www.srcmini.com/bower_components/gold-email-input/gold-email-input.html"> < /head> < body> < h3> Pre-validated email< /h3> < gold-email-input value = "http://www.srcmini.com/example@email.com" auto-validate style = "width:35%; display:inline-block; "> < /gold-email-input> < br/> < h3> Displayes error message< /h3> < gold-email-input label = "Enter an email address" auto-validate error-message = "Please enter a valid email" style = "width:35%; display:inline-block; "> < /gold-email-input> < /body> < /html>

【Polymerjs gold-email-input元素】输出
Polymerjs gold-email-input元素

文章图片

    推荐阅读