Polímero - Gold Phone Input

O elemento <gold-phone-input> é um campo de texto simples, especialmente para números de telefone, estilizado em Material Design.

Sintaxe

<gold-phone-input></gold-phone-input>

Este elemento tem um rótulo opcional, que é um "número de telefone" por padrão, conforme mostrado abaixo -

<gold-phone-input label = "Your phone number"></gold-phone-input>

Validação

A validação de um número de telefone ocorre de acordo com o padrão XXX-XXXXXXX, Onde "X"é um dígito e "-" é um separador. Esse número de telefone por padrão será considerado um número de telefone dos EUA. Para usar padrões numéricos diferentes, use os atributoscountry-code e phone-number-pattern conforme mostrado no código a seguir.

<gold-phone-input 
   country-code = "354"
   phone-number-pattern = "XX-XX-XX-XX-X">
</gold-phone-input>

Para validar manualmente, você pode usar validate()método que retorna verdadeiro se for válido ou falso, se não for válido. O uso deauto-validate e required atributos faz com que a entrada seja validada automaticamente.

Estilo

Para estilizar este elemento, consulte Polymer.PaperInputContainer para obter uma lista de propriedades personalizadas.

Exemplo

Para usar o elemento gold-phone-input, navegue até a pasta do projeto no prompt de comando e use o seguinte comando.

bower install PolymerElements/gold-phone-input --save

O comando acima instala o elemento gold-phone-input na pasta bower_components. Em seguida, importe o arquivo gold-phone-input em seu index.html usando o seguinte comando.

<link rel = "import" href = "/bower_components/gold-phone-input/gold-phone-input.html">

O programa a seguir demonstra o uso do elemento 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/polymer.html">
      <link rel = "import" href = "bower_components/gold-phone-input/gold-phone-input.html">
   </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>

Resultado

Para executar o aplicativo, navegue até o diretório do projeto e execute o seguinte comando.

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. A seguir será a saída.

polímero_elementos.htm

↰ Previous page