Aporte

    Utilice el componente Entrada para recopilar datos del usuario, como cadenas, números que se ajusten a diversos contextos, fechas y otros valores, como correos electrónicos y contraseñas. Se pueden combinar múltiples entradas para crear formas estéticas y fáciles de usar. La entrada es visualmente idéntica a la Ignite UI for Angular

    Input Demo

    Types

    En Sketch y Adobe XD, la entrada te permite elegir un ajuste preestablecido entre tres opciones: simple, sugerencia que viene con un texto auxiliar y barra de búsqueda. En Figma ofrecemos la posibilidad de elegir entre una entrada simple con o sin pista (propiedad booleana) y una barra de búsqueda.

    `sencillo``pista``barra de búsqueda`

    Los ajustes preestablecidos de sugerencias y simples en Sketch y Adobe XD ofrecen opciones entre tres tipos distintos: estilo de línea para una apariencia más aireada, estilo de borde para una percepción más estructurada en fondos de colores sólidos y estilo de cuadro que es más apropiado cuando la entrada se coloca en encima de una imagen vívida para mejorar la legibilidad de su contenido. Dado que estamos desaprobando el estilo de línea, en Figma solo tenemos disponibles los tipos de borde y cuadro.

    `frontera``caja`

    Interaction State

    En Sketch y Adobe XD, cada uno de estos ajustes preestablecidos se puede insertar en un estado Habilitado o Deshabilitado. En Figma, la Entrada está en un estado Habilitado de forma predeterminada y se puede cambiar a un estado Deshabilitado desde el panel de propiedades de la derecha.

    `habilitado``deshabilitado`

    State

    El componente Entrada pasa por diferentes estados a medida que el usuario interactúa con él: Inactivo, que muestra el marcador de posición en el lugar del contenido; Pase el cursor sobre ella, lo que indica que la entrada está activa cuando el usuario pasa el cursor sobre ella; Lleno, que aparece después de que el usuario ha ingresado el contenido y ha avanzado desde la entrada; y Focused, que proporciona una señal visual de que el usuario está escribiendo activamente la entrada.

    `inactivo``flotar``lleno``enfocado`

    Todo diseñador experimentado utiliza restricciones sabiamente para limitar la entrada del usuario y evitar estados no válidos, de ahí la disponibilidad de estilos de validación. A través de los estilos de validación disponibles, la Entrada está equipada para diseños sofisticados que muestran imágenes de Éxito, Advertencia y Error.

    `éxito``advertir``error`

    En Sketch, los estados y los estados de validación se logran con Symbol Overrides, mientras que en Figma puedes cambiar entre ellos usando la propiedad "Estado" en el panel de propiedades de la derecha. En Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre ellos.

    Layout

    La entrada tiene un amplio soporte para prefijos y sufijos a través de una combinación de texto e íconos que, en ciertos casos, pueden reducir el esfuerzo de entrada para el usuario: por ejemplo, un sufijo @email.com significa menos pulsaciones de teclas y más claridad del contenido esperado. En Figma, se puede eliminar el prefijo o el sufijo en el panel de propiedades activándolos o desactivándolos. En Sketch, para eliminar el prefijo o el sufijo, simplemente configure su anulación en ~Sin símbolo, y las reglas de diseño inteligente ajustarán la entrada en consecuencia. En Adobe XD, se puede lograr lo mismo eliminando la capa de Prefijo o Sufijo innecesaria y la Pila se encargará de ajustar el diseño en consecuencia.

    Content Type

    Cada componente de Entrada incluye una capa Content Type que especifica el tipo de información que se inserta, como texto, correo electrónico, contraseña, número de teléfono o fecha. Después de ingresar datos en el campo de entrada, es importante configurar el Content Type en consecuencia para garantizar que su diseño se analice correctamente en App Builder.

    Estilismo

    La entrada viene con flexibilidad de estilo a través de los colores de su fondo y borde/línea inferior, así como el color de los iconos y los estilos de texto de su prefijo, sufijo y áreas principales de contenido. Para cambiar los estilos de validación, se recomienda actualizar las variables de color respectivas en la biblioteca Indigo.Design.

    Usage

    Utilice el tipo de cuadro de Entrada al colocar formularios encima de una imagen para mejorar la legibilidad. Cuando utilice una entrada en estado de advertencia o error en sus diseños, elija un ajuste preestablecido con texto de ayuda y aproveche la oportunidad para brindar orientación al usuario.

    Hacer No

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.