Polymer-gold-email-input
提供:Dev Guides
ポリマー-ゴールドメール入力
<gold-email-input>要素は、特に電子メールアドレス用のシンプルテキストフィールドで、Material Designでスタイルが設定されています。
構文
<gold-email-input></gold-email-input>
この要素にはオプションのラベルがあり、以下に示すようにデフォルトで「メール」です-
<gold-email-input label = "Your email address"></gold-email-input>
検証
手動で検証するには、有効な場合はtrue、無効な場合はfalseを返す* validate()メソッドを使用できます。 *auto-validate および required 属性を使用すると、入力が自動的に検証されます。
スタイリング
この要素のスタイルを設定するには、 Polymer.PaperInputContainer でカスタムプロパティのリストをご覧ください。
例
gold-email-input要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。
bower install PolymerElements/gold-email-input --save
上記のコマンドは、bower_componentsフォルダーにgold-email-input要素をインストールします。 次に、次のコマンドを使用して、index-lにgold-email-inputファイルをインポートします。
<link rel = "import" href = "/bower_components/gold-email-input/gold-email-inputl">
次のプログラムは、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/polymerl">
<link rel = "import" href = "bower_components/gold-email-input/gold-email-inputl">
</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>
出力
アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。
polymer serve
ここでブラウザを開き、 http://127.0.0.1:8081/ に移動します。 出力は次のようになります。