El Selector ayuda a los usuarios a seleccionar y configurar datos específicos.
Selector
Se deben usar selectores para que los usuarios puedan elegir entre una cantidad limitada de elementos.
De forma predeterminada, los elementos se repiten indefinidamente en ambas direcciones. Considera inhabilitar este comportamiento si el orden de la lista es importante o para permitir que los usuarios lleguen al primer y al último elemento con solo deslizar el dedo.
Anatomía
Anatomía
A. Columna inactiva
B. Disparador de dos puntos
C. Columna de selector
D. Contenido principal
E. Contenido intermedio
F. Contenido inferior
Anchos y alturas
El grupo de selector ocupa la altura y el ancho disponibles. Hay cuatro opciones de diseño para las columnas del selector. Cada diseño se centra y ocupa la altura disponible. Los anchos de columna se definen según el ancho necesario para adaptarse a la cantidad de dígitos necesarios en la fuente. El selector de fecha es la excepción, ya que llena la pantalla de forma horizontal y se desprende del borde.
Por ejemplo, los números determinarán que el ancho “00” es y, luego, establecerán el ancho. En el caso de los campos de texto, por ejemplo, el campo del mes se calculará con el ancho de “MMM” (que es la letra más ancha del alfabeto latino). Por lo tanto, el ancho y la altura (que es la altura de línea del estilo de tipo utilizado) se verán afectados por la fuente utilizada.
Los elementos del selector varían en tamaño en el punto de interrupción.
Uso
Consulta los siguientes ejemplos de selectores de fecha y hora
Para ver una implementación del selector de fecha y hora compilada previamente, consulta la Biblioteca de Horologist en GitHub.
Si quieres crear una experiencia similar, en la que los usuarios elijan un valor de varias partes en varios selectores, usa el componente integrado pickerGroup. Este objeto usa un objeto coordinador de enfoque para asignar el foco al elemento Selector correcto.
Diseños adaptables
Selector de tiempo 24 h
Selector de tiempo 12 h
Selector de fecha
Comportamiento responsivo
Aumento del tamaño del texto
Después de más de 225 puntos de interrupción, cambia el tamaño de fuente del elemento de selector. La copia inferior y superior dentro de la columna de desplazamiento diferido se ajusta (A), al igual que la copia del medio. Estos son algunos ejemplos:
Diseño de dos columnas
Por debajo del punto de interrupción de 225 dp
Fuente: Display 2
Punto de interrupción superior a 225 dp
Fuente: Display 1
Diseño de tres columnas
Por debajo del punto de interrupción de 225 dp
Fuente: Display 3
Por encima del punto de interrupción de 225 dp
Fuente: Display 2
Aumento del tamaño del gradiente
El gradiente en la columna del Selector se define en altura según el espacio disponible. Tanto los gradientes superior como los inferiores se establecen en un tercio (33%) de la altura disponible. Esto significa que, en cada tamaño de pantalla disponible, el gradiente se escala de manera proporcional. Independientemente del diseño de la columna.
Por debajo del punto de interrupción de 225 dp
Tamaño: 33% del alto de columna
Por encima del punto de interrupción de 225 dp
Tamaño: 33% del alto de columna
Aumento del espaciado entre columnas
El espaciado entre columnas se escala más allá del punto de interrupción de más de 225, ya sea comenzando en 2 dp o 4 dp y aumentando hasta 6 dp. Esto depende del diseño que hayas seleccionado, ya sea con 2 o con 3 diseños de columnas.
Diseño de dos columnas
Por debajo del punto de interrupción de 225 dp
Separación entre columnas de 4 dp
Por encima del punto de interrupción de 225 dp
Separación entre columnas de 6 dp
Diseño de tres columnas
Por debajo del punto de interrupción de 225 dp
Separación entre columnas de 2 dp
Por encima del punto de interrupción de 225 dp
Separación entre columnas de 6 dp