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
文章图片
它将在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 Google图表
- Polymerjs事件处理详解
- Polymerjs gold元素
- Polymerjs gold-cc-input元素
- Polymerjs gold-cc-cvc-input用法
- Polymerjs 数据系统
- Polymerjs元素
- Polymerjs 自定义元素
- Polymer CLI命令