Campos y controles flotantes


Fields

Los campos son áreas en las que los usuarios pueden escribir texto.

Relleno y tamaño

Los campos de texto de una línea son un alto fijo de 32 que coinciden con el alto de otros componentes. Algunos campos de texto, como los campos Description, pueden ser más altos verticalmente para permitir más texto.

Miembros

Estos son los Estados de los campos de texto. Los campos de texto existen en distintos Estados. Tenemos diseños específicos dedicados a nueve escenarios posibles, entre los que se incluyen (de arriba a abajo): campo de texto, teclado en el foco y cursor dentro del campo, teclado en foco con el texto escrito, el tratamiento de errores se ha realizado correctamente; error en el control de errores, texto no cifrado campo (incluido un icono X), campo de búsqueda (incluido un icono de búsqueda), campo de carga y un campo deshabilitado.

Dar formato al texto y las etiquetas de ayuda

Los campos pueden contener texto de marcador de posición para proporcionar un ejemplo del tipo de información necesaria. También pueden contener etiquetas que proporcionen al usuario más contexto. Dentro de un campo, el texto siempre debe justificarse a la izquierda. También se utiliza la grafía de oraciones en este caso.

Usamos la interfaz de usuario de Segoe regular en 12 PTO (Caption) y $app-Gray-02 para las etiquetas. Para el texto de ayuda, usamos Segoe UI regular en 14 PT (base) y $app-Gray-02.


Flota

Los controles flotantes son más sencillos que los cuadros de diálogo y se pueden desechar rápidamente. Pueden contener botones, campos y otros componentes.

Tamaño y relleno

Se recomienda un relleno de 16px a la izquierda y derecha del contenido.

Placement

Los controles flotantes son contextuales y deben colocarse por encima, por debajo o junto al elemento que lo ha desactivado.

Desplazamiento

El encabezado permanece en su ubicación para dar contexto al contenido que se va a desplazar.

Mobile

Los campos son cuadros de entrada de texto que aceptan la entrada de los usuarios. Los menús desplegables son ventanas emergentes horizontales que aparecen en el panel superior y se pueden usar para mostrar más detalles sobre un elemento.

Controles de campo

Controles de lista de menús desplegables