Inputs Ionic | ¡Aprende todo sobre los ion input aquí

¿Interesad@ en saber cómo se implementa un input de Ionic de manera correcta? O, quizás, ya sabes cómo se usa la etiqueta ion-input pero te falta conocer algún detalle sobre alguno de sus campos o funciones ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps móviles desde 2014, y cuando termines con este artículo sabrás capturar datos de los usuarios a través de ion-input cómo tu aspiradora absorve la mierda de detrás del sofá.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Cómo se usa Input Ionic

En primer lugar, y cómo te habrás dado cuenta, estamos cambiado el formato del curso. A ver si este gusta más. Básicamente eliminamos partes que no son necesarias y así hacemos plantillas más dinámicas en lugar de todas iguales. Si te gusta, dímelo en los comentarios.

Veamos un trozo de código primero:

<!—- Input por defecto -->
<ion-input></ion-input>

<!-- Input con un valor asignado -->
<ion-input value="custom"></ion-input>

<!-- Input con una ayuda -->
<ion-input placeholder="Enter Input"></ion-input>

<!-- Input con un botón de borrar cuando hay contenido en él -->
<ion-input clearInput value="clear me"></ion-input>

<!-- Number de tipo numérico  -->
<ion-input type="number" value="333"></ion-input>

<!—- Input desactivado -->
<ion-input value="Disabled" disabled></ion-input>

<!—- Input de solo lectura -->
<ion-input value="Readonly" readonly></ion-input>

<!-- Inputs con etiquetas  -->
<ion-item>
  <ion-label>Etiqueta por defecto</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="floating">Etiqueta flotante</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="fixed">Etiqueta fija</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label position="stacked">Etiqueta amontonada</ion-label>
  <ion-input></ion-input>
</ion-item>

Cómo se aprecia en el ejemplo, es algo bastante intuitivo de utilizar. Si tienes cualquier duda, déjamela en los comentarios. Continuamos…

Tipos soportados por ion-input

Cómo en los inputs HTML, podemos asignarle tipos. Estos tipos son los siguientes:

• text -> El básico y por defecto en todos los inputs. Permite la entrada de todo tipo de información.
• password -> Permitirá la entrada de cualquier tipo de carácter, pero protegiendo estos con un punto para que no se vea lo que se está introduciendo.
• email -> Permite la entrada de cualquier tipo de texto, pero verifica si es un email. Compara la arroba y el punto. Aun así, es recomendable darle un repaso antes de tratar con él.
• number -> Solo permitirá la entrada de números y en los dispositivos móviles solo saldrá el teclado numérico.
• tel -> Solo permitirá la entrada de dígitos que sean aplicables a un número de teléfono. Por ejemplo, el símbolo “+”.
• url -> Permite la entrada de todos los dígitos, pero hace una comprobación para saber si lo introducido se trata de una URL.

Pues ahí están, estos son los tipos de inputs que podemos meter en nuestras apps. La verdad que con estos tenemos para cubrir todos los posibles casos. Y si alguna se escapa, o queremos darle una capa de personalización, bastante con extender el text y listo.

Etiquetas (Labels)

Puedes usar la etiqueta "label" para describir la entrada del usuario. Las pueden utilizar de manera visual, y también serán leídas por lectores de pantalla cuando el usuario tome el foco del input. Esto facilita que tu usuario comprenda la intención del input. Hay varias formas de asignar un label:

label: Se usa para poner un texto plano sobre el diseño.

aria-label: Será el texto que se muestre en un lector digital cuando no pueda cargarse el label.

Donde colocar la etiqueta label

Por defecto, las etiquetas ocuparán el ancho de su contenido. Podrás utilizar la propiedad labelPlacement para controlar cómo se coloca la etiqueta en relación con el control.

<ion-list>
  <ion-item>
    <ion-input label="Default label" placeholder="Enter text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Fixed label" labelPlacement="fixed" placeholder="Enter text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Stacked label" labelPlacement="stacked" placeholder="Enter text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
  </ion-item>
</ion-list>

Label Slot (fase experimental)

Mientras que las etiquetas en texto plano deben pasarse a través de la propiedad label, si necesitas HTML personalizado, puedes pasarlo mediante el label slot.

Cabe destacar que esta característica se considera experimental porque depende de una versión simulada de los slots de los Web Components. Como resultado, el comportamiento simulado puede no coincidir exactamente con el comportamiento nativo de los slots.

<ion-list>
  <ion-item>
    <ion-input labelPlacement="floating" value="hi@ionic.io">
      <div slot="label">Email <ion-text color="danger">(Required)</ion-text></div>
    </ion-input>
  </ion-item>
</ion-list>

Ahora las propiedades ion input

Ahora vamos a ver las propiedades con las que contamos para hacer que nuestros inputs sean la cream de la cream. Estas propiedades se podrán asignar sobre el html o sobre un override cuando extendemos la clase ion-input para hacer algo personalizado. De esto hablaremos en otro momento.

• Accept
  • accept -> string -> Solo será usado cuando el tipo de archivo sea “file”. Será una cadena delimitada por comas que nos permitirá definir cuáles serán tipos de archivo aceptado. Ejemplo: ‘txt,mp3,mp4,flv,jpg’
• Autocapitalize
  • autocapitalice -> string -> Indica si el valor que introduce el usuario en el input debe auto-capitalizarse. Por defecto “off”. Valores “on” | “off”.
• Autocomplete
  • autocomplete -> string -> Le indicamos al sistema si queremos que auto-complete el campo. Por defecto “off” y los posibles valores son: “on” | “off”.
• Autocorrect
  • auctocorrect -> string -> Este atributo le indica al sistema que auto-corrija las palabras que se insertan en el input. Por defecto “off” y los posibles valores son “on” | “off”.
• Autofocus
  • autofocus -> boolean -> Con este atributo le decimos al sistema si queremos que el input pille el foco nada más mostrarse en pantalla. Por defecto, false.
• ClearInput
  • clear-input -> boolean -> Si es verdadero, cuando haya contenido en el input, aparecerá un botón que al pulsarle borrará su contenido. Por defecto, false.
• ClearOnEdit
  • clear-on-edit -> boolean -> Si es verdadero, el contenido del input se eliminará al tomar el foco. Por defecto, undefined.
    • Nota: Cuando el tipo es password será verdadero de por defecto.
• Color
  • color -> string -> Será la paleta de color que tome el componente, o un color asignado directamente el formato hexadecimal. Los valores por defecto son "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
• Debounce
  • debounce -> number -> El tiempo, en milisegundos, que pasará hasta que el componente emita el evento ionChange desde que el usuario deja de introducir datos. Por defecto, 0.
• Disabled
  • disabled -> boolean -> Si es verdadero, el usuario no podrá interactuar con el componente. Por defecto, false.
• Inputmode
  • inputmode -> enumerado -> Será ayuda que aportará el sistema dependiente de este. A parte, mostrará un teclado u otro. Tenemos los siguientes disponibles:
    • “decimal”
    • “email”
    • “none”
    • “numeric”
    • “search”
    • “tel”
    • “text”
    • “url”
    • Undefined
• Max
  • max -> string -> El valor máximo que puede tener un input. Siempre tiene que ser superior al min.
• MaxLength
  • maxlength -> number -> La longitud máxima de caracteres que aceptará el input. Solo será aplicable a los próximos tipos: text, email, search, password y tel.
• Min
  • min -> string -> El valor mínimo que puede tener el campo. Siempre tiene que ser menor que “max”.
• MinLength
  • minlength -> number -> La longitud mínima que puede tener el input. Solo se aplicará a los siguientes tipos: text, email, search, password y tel.
• Mode
  • mode -> enumerado -> Será el modo en el que visualizará en pantalla. Los valores son los siguientes: “ios”, “md”.
• Multiple
  • multiple -> boolean -> Si es verdadero, el usuario podrá introducir múltiples valores. Solo los tipos “email” y “file” serán soportados. Si son cualquier otro tipo, este parámetro será ignorado.
• Name
  • name -> string -> Similar al “name” de html. Será el parámetro enviado cómo name en caso de que sea un submit de un formulario. Por defecto será el id de este mismo input (this.inputId).
• Pattern
  • pattern -> string -> Una expresión regular con la que será verificado el valor del input. El contenido se evalúa carácter a carácter por lo que todo el contenido tendrá que coincidir. Solo será aplicado a los siguientes tipos:
    • text
    • search
    • tel
    • url
    • email
    • password
  • Todos los demás tipos serán ignorados.
• Placeholder
  • placeholder -> string -> Será el texto de “instrucciones” o de “ayuda” que le pones al usuario en el componente. Cuando comienza a introducir un valor desaparecerá.
• Readonly
  • readlonly -> boolean -> Si es verdadero, el usuario no podrá modificar este valor. Pero si será enviado en el submit a diferencia de cuando el input esté disabled. Por defecto, false.
• Required
  • required -> boolean -> Si es verdadero, no se podrá hacer el submit en caso de que esté vacío. Por defecto, false.
• Size
  • size -> number -> Será el número, en pixeles, que tendrá el ancho del componente. Si el valor es “texto” o “password” será el ancho del número de caracteres que tenga. Solo será aplicable a los siguientes tipos:
    • text
    • search
    • tel
    • url
    • email
    • password
• Spellcheck
  • spellcheck -> boolean -> Si es verdadero, este input tendrá su ortografía y gramática verificadas. Por defecto, false.
• Step
  • step -> string -> Define la cantidad de saltos que hacer un número cuando se pulsa sobre la flecha arriaba o abajo del input. Solo es aplicable a input de tipo number. Por defecto es 1.
• Type
  • type -> El tipo de control que vamos a utilizar, por defecto text. Las posibilidades que tenemos son las siguientes:
    • date
    • email
    • number
    • password
    • search
    • tel
    • text
    • time
    • url
• Value
  • value -> string -> Será el valor que tendrá el input a la hora de obtenerlo desde el código ts o el submit del formulario.

Bueno, pues con esto creo que hemos visto todos. Si se me ha olvidado alguna propiedad de los ion-input dímelo en los comentarios. La agregaré en cuanto la vea J

Y ahora, demos paso a los eventos:

Eventos y listener de Ionic ion-input

En este caso, la verdad que no hay muchos. Si contamos los heredados quizás sí que hay unos cuentos, pero del mismo componente solo tenemos 4.

• ion-blur -> Emitido cuando el input pierde el foco.
• ion-change -> Emitido cuando el valor del input cambia.
• ion-focus -> Emitido cuando el input toma el foco.
• ion-input -> Muy similar a ion-change, pero solo se dispara cuando el usuario introduce o borra contenido del input.

Y esos son todos los eventos que tenemos. Ahora vemos los métodos disponibles y que hace cada uno de ellos.

Eventos y funciones de Inputs en Ionic

En este caso seré breve también, solo tenemos 2 métodos propios de la clase ion-input. Se trata de “getInputElement” que devuelve una instancia de la vista nativa del componente a través de una promesa y setFocus, que hace que el input tome el foco cuando nosotros queramos.

Ale, ya está, eso es todo, jajajaja. Bueno, ahora veamos las propiedades CSS.

Propiedades CSS de los Ionic input

Cómo en el resto de componentes, tenemos la opción de poder usar y definir variables CSS que ya están incluidas, por defecto, en el módulo y así poder cambiar el style/estilo de nuestro componente.

En este caso, las propiedades del style son las siguientes:

• --background -> Nos permite definir qué fondo queremos en el input.
• --color -> El color del texto del input.
• --padding-bottom -> El relleno inferior que queremos darle.
• --padding-end -> El relleno en la parte de la derecha que queremos darle.
• --padding-start -> El relleno en la parte de la izquierda que queremos darle.
• --padding-top -> El relleno en la parte superior que queremos darle.
• --placeholder-color -> Será el color del texto de ayuda.
• --placeholder-font-style -> Será el estilo de la fuente que adoptará el texto de ayuda.
• --placeholder-font-weight -> Será el ancho que tendrá la fuente del texto de ayuda.
• --placeholder-opacity -> Es la transparencia que tendrá el texto de ayuda.

Y el tutorial en video, cómo siempre

Algo más que quizás te interesa

Mira, exiten muchas maneras de aumentar exponencialmente las descargas de tu aplicación, y por extrensión tus ingresos. Una de ellas es la mejora constante del icono de tu app y para eso hemos creado esta herramineta para ti. Inteligencia artificial para mejorar tus logos entrenada con todos los logos de las apps de Google Play. No te espoileo más, entra al enlace.

Sin más que añadir solo queda despedirme hasta el siguiente artículo. Hasta entonces, que vaya bien :)