Polimero - Ingresso email oro
L'elemento <gold-email-input> è un semplice campo di testo, specialmente per gli indirizzi e-mail, con stile in Material Design.
Sintassi
<gold-email-input></gold-email-input>
Questo elemento ha un'etichetta facoltativa, che è "email" per impostazione predefinita, come mostrato di seguito:
<gold-email-input label = "Your email address"></gold-email-input>
Validazione
Per convalidare manualmente, puoi utilizzare validate()metodo che restituisce true se è valido o altrimenti false, se non è valido. L'uso diauto-validate e required gli attributi determinano la convalida automatica dell'input.
Messa in piega
Per modellare questo elemento, vedere Polymer.PaperInputContainer per un elenco di proprietà personalizzate.
Esempio
Per utilizzare l'elemento gold-email-input, vai alla cartella del tuo progetto nel prompt dei comandi e usa il comando seguente.
bower install PolymerElements/gold-email-input --save
Il comando precedente installa l'elemento gold-email-input nella cartella bower_components. Successivamente, importa il file gold-email-input nel tuo index.html utilizzando il seguente comando.
<link rel = "import" href = "/bower_components/gold-email-input/gold-email-input.html">
Il seguente programma dimostra l'uso dell'elemento 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 = "[email protected]"
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>
Produzione
Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando.
polymer serve
Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.