个性化阅读
专注于IT技术分析

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 = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import" href = "bower_components/polymer/polymer.html">
      <link rel = "import" href = "bower_components/gold-email-input/gold-email-input.html">
   </head>

   <body>
      <h3>Pre-validated email</h3>
      <gold-email-input
         value = "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>

输出

gold-email-input
赞(0)
未经允许不得转载:srcmini » Polymerjs gold-email-input元素

评论 抢沙发

评论前必须登录!