Polymer-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" は数字で、 "-"は区切り文字です。 この電話番号は、デフォルトでは米国の電話番号と見なされます。 異なる番号パターンを使用するには、次のコードに示すように、属性 country-code および phone-number-pattern を使用します。
<gold-phone-input
country-code = "354"
phone-number-pattern = "XX-XX-XX-XX-X">
</gold-phone-input>手動で検証するには、有効な場合はtrue、無効な場合はfalseを返す* validate（）メソッドを使用できます。 *auto-validate および required 属性を使用すると、入力が自動的に検証されます。
スタイリング
この要素のスタイルを設定するには、 Polymer.PaperInputContainer でカスタムプロパティのリストをご覧ください。
例
gold-phone-input要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。
bower install PolymerElements/gold-phone-input --save上記のコマンドは、bower_componentsフォルダーにgold-phone-input要素をインストールします。 次に、次のコマンドを使用して、index-にgold-phone-inputファイルをインポートします。
<link rel = "import" href = "/bower_components/gold-phone-input/gold-phone-inputl">次のプログラムは、gold-phone-input要素の使用方法を示しています。
<!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/polymerl">
<link rel = "import" href = "bower_components/gold-phone-input/gold-phone-inputl">
</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>出力
アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。
polymer serveここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。 出力は次のようになります。
