ポリマー-ゴールドメール入力

<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 = "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>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ゴールドメール入力

Polymer-gold-email-input

ポリマー-ゴールドメール入力

構文

検証

スタイリング

例

出力

目次