投稿
  1. Web176教程首页
  2. Polymer教程

Polymer教程：Gold Elements

terry • • Polymer教程 • 阅读 284

gold元素是专门为电子商务用例设计的，例如结账流程。

下表显示了不同类型的gold元素。

 Gold CC CVC Input

<gold-cc-cvc-input>是Material Design样式的单行输入字段，用于输入信用卡的验证码。

语法

该元素具有一个可选标签，默认情况下为“ CVC”，如以下代码片段所示。

<gold-cc-cvc-input label = "cvc"></gold-cc-cvc-input>

您还可以通过绑定属性cardType来将<gold-cc-input>与<gold-cc-cvc-input>一起使用。

<gold-cc-input card-type = "{{cardType}}"></gold-cc-input>
<gold-cc-cvc-input card-type = "[[cardType]]"></gold-cc-cvc-input>

验证

对于大多数有效的卡，输入接受3位长的CVC，但对于有效的美国运通卡，CVC被认为是4位，否则为3位。

若要手动验证，可以使用validate（）方法，如果有效，该方法返回true，否则返回false。使用自动验证和必填属性会使输入自动得到验证。

风格

要设置此元素的样式，请参阅Polymer.PaperInputContainer以获取自定义属性的列表。

例子

要使用gold-cc-cvc-input元素，请在命令提示符下导航到您的项目文件夹，然后使用以下命令。

bower install PolymerElements/gold-cc-cvc-input --save

上面的命令将gold-cc-cvc-input元素安装在bower_components文件夹中。接下来，使用以下命令将gold-cc-cvc-input文件导入index.html中。

<link rel = "import" 
   href = "/bower_components/gold-cc-cvc-input/gold-cc-cvc-input.html">

以下程序演示了gold-cc-cvc-input元素的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC CVC 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-cc-cvc-input/gold-cc-cvc-input.html">
   </head>

   <body>
      <h3>Pre-validated cvc</h3>
      <gold-cc-cvc-input
         label = "valid cvc"
         value = "586"
         auto-validate  
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input><br/>

      <gold-cc-cvc-input
         label = "invalid cvc"
         value = "55"
         auto-validate  
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input>	
	
      <h3>Displays custom error message</h3>
      <gold-cc-cvc-input 
         label = "Enter a cvc" 
         auto-validate 
         error-message = "Please enter a valid cvc" 
         style = "width:30%; display:inline-block;">
      </gold-cc-cvc-input>
   </body>
</html>

输出

要运行该应用程序，请导航到您的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出：

Polymer教程：Gold Elements

Gold CC Input

<gold-cc-input>是“材料设计”样式的输入文本字段，用于输入信用卡号。用户输入数字时，每4位数字后会添加一个空格。

语法

<gold-cc-input></gold-cc-input>

此元素具有可选标签，默认情况下为“卡号”，如下所示-

<gold-cc-input label = "CC"></gold-cc-input>

验证

使用Luhn校验和，可以检测输入的信用卡号是否有效以及卡的类型。

若要手动验证，可以使用validate（）方法，如果有效，该方法返回true，否则返回false。使用自动验证和必填属性会使输入自动得到验证。

可通过cardTypes属性提供信用卡类型列表，例如美国运通卡，diners_club，discover，jcb，laser，艺术大师，万事达卡，签证，visa_electron。

样式

要设置此元素的样式，请参阅Polymer.PaperInputContainer以获取自定义属性的列表。

用于设置此元素样式的custom属性如下-

  • —- gold-cc-input-icon-container-定义用于自定义图标容器的mixin。默认值为{}。

例子

要使用gold-cc-input元素，请在命令提示符下导航到您的项目文件夹，然后使用以下命令。

bower install PolymerElements/gold-cc-input --save

上面的命令将gold-cc-input元素安装在bower_components文件夹中。接下来，使用以下命令将gold-cc-input文件导入index.html中

<link rel = "import" href = "/bower_components/gold-cc-input/gold-cc-input.html">

以下程序演示了gold-cc-input元素的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>Gold CC 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-cc-input/gold-cc-input.html">
   </head>

   <body>
      <h3>Pre-validated credit card numbers</h3>
      <gold-cc-input 
         label = "Visa" 
         auto-validate 
         value = "4111111111111111" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input><br/>
	
      <gold-cc-input 
         label = "Invalid Visa" 
         auto-validate 
         value = "4111 1111 1111 0021" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
	
      <h3>Displayes error message for wrong number</h3>
      <gold-cc-input 
         label = "Enter a credit card number" 
         auto-validate 
         error-message = "Please enter a valid credit card number" 
         style = "width:40%; display:inline-block;">
      </gold-cc-input>
   </body>
</html>

输出

要运行该应用程序，请导航到您的项目目录并运行以下命令。

polymer serve

现在打开浏览器并导航到http://127.0.0.1:8081/。以下将是输出：

Polymer教程：Gold Elements

Gold Email Input

<gold-email-input>元素是一个简单的文本字段，尤其是对于电子邮件地址，在Material Design中设置样式。

语法

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

此元素具有一个可选标签，默认情况下为“电子邮件”，如下所示-

<gold-email-input label = "Your email address"></gold-email-input>

验证

若要手动验证，可以使用validate（）方法，如果有效，该方法返回true，否则返回false。使用自动验证和必填属性会使输入自动得到验证。

风格

要设置此元素的样式，请参阅Polymer.PaperInputContainer以获取自定义属性的列表。

例子

要使用gold-email-input元素，请在命令提示符下导航到您的项目文件夹，然后使用以下命令。

bower install PolymerElements/gold-email-input --save

上面的命令将gold-email-input元素安装在bower_components文件夹中。接下来，使用以下命令将gold-email-input文件导入index.html中。

<link rel = "import" href = "/bower_components/gold-email-input/gold-email-input.html">

以下程序演示了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 Phone Input

<gold-phone-input>元素是一个简单的文本字段，尤其是电话号码，在Material Design中设置样式。

语法

<gold-phone-input></gold-phone-input>

此元素具有可选标签，默认情况下为“电话号码”，如下所示-

<gold-phone-input label = "Your phone number"></gold-phone-input>

验证

电话号码的验证根据格式XXX-XXXXXXX进行，其中“ X”是数字，“-”是分隔符。默认情况下，该电话号码将被视为美国电话号码。要使用不同的号码模式，请使用国家代码和电话号码模式属性，如以下代码所示。

<gold-phone-input 
   country-code = "354"
   phone-number-pattern = "XX-XX-XX-XX-X">
</gold-phone-input>

若要手动验证，可以使用validate()方法，如果有效，该方法返回true，否则返回false。使用自动验证和必填属性会使输入自动得到验证。

风格

要设置此元素的样式，请参阅Polymer.PaperInputContainer以获取自定义属性的列表。

例子

要使用gold-phone-input元素，请在命令提示符下导航到您的项目文件夹，然后使用以下命令。

bower install PolymerElements/gold-phone-input --save

上面的命令将gold-phone-input元素安装在bower_components文件夹中。接下来，使用以下命令将gold-phone-input文件导入index.html中。

<link rel = "import" href = "/bower_components/gold-phone-input/gold-phone-input.html">

以下程序演示了电话输入元素的用法。

<!DOCTYPE html>
<html>
   <head>
      <title>Gold Phone 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-phone-input/gold-phone-input.html">
   </head>

   <body>
      <h3>Pre-validated Us number</h3>
      <gold-phone-input
         label = "Valid"
         value = "358-101-5422"
         auto-validate  
         style = "width:35%; display:inline-block;">
      </gold-phone-input><br/>
	
      <gold-phone-input
         label = "Invalid"
         value = "358-101-542"
         auto-validate   
         style = "width:35%; display:inline-block;">
      </gold-phone-input>	<br/>
	
      <h3>Displayes error message<h3>
      <gold-phone-input 
         label = "Enter the phone number" 
         auto-validate 
         error-message = "Please enter the valid US number" 
         style = "width:35%; display:inline-block;">
      </gold-phone-input>	
   </body>
</html>

作者：terry，如若转载，请注明出处：https://www.web176.com/polymer/2329.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2021年4月6日 下午5:35
下一篇 2021年4月7日 上午11:29

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注