Selector de tiempo

    Utilice el componente Selector de hora para representar visualmente la porción de tiempo de una fecha (hora, minutos y segundos) y proporcionar medios adecuados para su visualización en formularios y selección desde un menú desplegable o cuadro de diálogo. El selector de tiempo es visualmente idéntico a la Ignite UI for Angular

    Time Picker Demo

    Time Picker Input

    Puede insertar una entrada de selector de hora en sus formularios para indicar campos para seleccionar solo la parte horaria de la fecha. Admite estados interactivos habilitado y deshabilitado, así como variantes de diálogo y menú desplegable que se mostrarán tras la interacción del usuario.

    Picker Layout

    Time Picker admite un diseño de cuadro de diálogo con orientación horizontal y vertical, así como un diseño desplegable para facilitar diferentes modos de selección de tiempo, proyectando diferentes sombras para distinguirlas más fácilmente entre sí. Tenga en cuenta que los diseños de diálogo vienen con un encabezado que puede ocultar en Figma desactivando la propiedad booleana Header y el diseño se ajustará en consecuencia gracias al diseño automático agregado. En Sketch puedes lograr esto estableciendo la anulación del encabezado en ~Sin símbolo y, mediante el uso de un diseño inteligente, todo se ajustará en consecuencia. En Adobe XD, debe eliminar la capa del encabezado y el diseño se ajustará mediante el uso de una pila.

             

    Content

    Time Picker admite formatos de 12 y 24 horas a través de dos modos de contenido distintos. Además de la parte de horas, minutos y segundos, el modo de contenido de 12 horas proporciona una parte de meridiem, donde es posible seleccionar entre AM y PM.

    Buttons

    El Time Picker viene con dos botones: uno para cancelar la selección, lo que revertiría la hora al original, y otro para confirmar la selección, lo que guardaría los cambios realizados.

    Se puede crear una plantilla para el área de botones, lo que facilita ocultar botones según sea necesario. En Figma, puedes simplemente ocultar un botón ocultando su instancia del panel de capas. De manera similar, en Sketch, puedes configurar la anulación del botón en ~Sin símbolo para ocultarlo. En Adobe XD, puedes eliminar por completo los botones innecesarios. A diferencia de Sketch y Figma, Adobe XD le permite agregar más botones, por ejemplo, para acciones personalizadas, al área de botones del panel Bibliotecas. Ya sea que elimine o agregue botones, la pila aplicada ajustará el diseño automáticamente. Para lograr esto en Figma y Sketch, primero debe separar la instancia del componente y luego aplicar los cambios deseados.

    Estilismo

    El Selector de tiempo viene con flexibilidad de estilo a través de las diversas opciones para el fondo del encabezado y los colores del título, así como colores de texto para la hora, minutos, segundos y meridiem (AM/PM) seleccionados. Los botones Cancelar y Aceptar son botones planos y se les puede aplicar el estilo correspondiente.

    Usage

    Cuando muestre el Selector de tiempo como un cuadro de diálogo, agregue una capa que atenúe el resto de la interfaz de usuario y, cuando lo muestre como un menú desplegable, colóquelo justo debajo de una entrada del Selector de tiempo con configuración desplegable. Evite ocultar todos los botones del Selector de tiempo cuando se muestra como un cuadro de diálogo porque no tener una acción afirmativa perjudica la usabilidad del componente.

    Hacer No

    Additional Resources

    Temas relacionados:

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