- Polymer Tutorial
- Polymer - Home
- Polymer - Overview
- Polymer - Installation
- Polymer - Elements
- Polymer - Custom Elements
- Polymer - Shadow DOM and Styling
- Polymer - Events
- Polymer - Data System
- Polymer Useful Resources
- Polymer - Quick Guide
- Polymer - Useful Resources
- Polymer - Discussion
Polymer - Gold Email Input
<gold-email-input> element is a simple text field, especially for e-mail addresses, styled in Material Design.
Syntax
<gold-email-input></gold-email-input>
This element has an optional label, which is "email" by default as shown below −
<gold-email-input label = "Your email address"></gold-email-input>
Validation
To validate manually, you can use validate() method that returns true if it is valid or otherwise false, if it is not valid. The use of auto-validate and required attributes cause the input to be automatically validated.
Styling
To style this element, see Polymer.PaperInputContainer for a list of custom properties.
Example
To use the gold-email-input element, navigate to your project folder in the command prompt and use the following command.
bower install PolymerElements/gold-email-input --save
The above command installs the gold-email-input element in bower_components folder. Next, import the gold-email-input file in your index.html using the following command.
<link rel = "import" href = "/bower_components/gold-email-input/gold-email-input.html">
The following program demonstrates the use of gold-email-input element.
<!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>
Output
To run the application, navigate to your project directory and run the following command.
polymer serve
Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.