Seleccionar

    Utilice Seleccionar componente para permitir que el usuario elija una única opción de una lista desplazable de elementos colocados en un menú desplegable. El Select es un tipo de entrada para que los usuarios envíen datos. Si su escenario requiere la selección de varios elementos, debe utilizar el Combo en su lugar. Select es visualmente idéntico a la Ignite UI for Angular Select.

    Select Demo

    La Selección se construye combinando una entrada que contiene la selección actual con un menú desplegable que aparece para permitirle seleccionar un elemento.

    Input Type

    Seleccionar admite los mismos tres tipos de entrada típicos del componente Entrada: un tipo de línea para un estilo más aireado, un tipo de borde para una percepción más estructurada en fondos de colores sólidos y un tipo de cuadro que es más apropiado cuando se coloca encima de un fondo vívido. imagen para mejorar la legibilidad. 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 los tres tipos de entrada Seleccionar se puede insertar en estado habilitado o deshabilitado. Dado que estamos desaprobando el estilo de línea, en Figma solo tenemos disponibles los tipos de borde y cuadro y se pueden cambiar a un estado deshabilitado desde el panel de propiedades.

    `estado habilitado``estado deshabilitado`

    State

    Cuando el usuario interactúa con Select, su entrada pasa por varios estados de selección: Inactivo con un marcador de posición en el lugar del contenido; Enfocado cuando el menú desplegable está abierto; y se llena una vez que el usuario ha terminado con la selección y ha seguido adelante. Estas mejoras de flexibilidad permiten un diseño de interacción más dinámico que puede fluir sin problemas hacia la creación de prototipos de alta fidelidad.

    `inactivo``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, Select es consistente con la Entrada estándar y está equipado 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 Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre ellos. En Figma puedes cambiar entre ellos usando la propiedad State del panel de propiedades.

    Note

    La entrada Seleccionar tiene solo una opción de diseño, pero esta anulación se ha conservado en Sketch para garantizar la coherencia con la Entrada estándar. Por otro lado, en Figma tenemos un componente base separado llamado.Select Input, que se usa explícitamente en el componente Select.

    Layout

    Select tiene una amplia compatibilidad con prefijos y sufijos a través de una combinación de texto e iconos. En Figma, la eliminación del prefijo o sufijo se puede lograr en el panel de propiedades activándolos o desactivándolos. En Sketch, para eliminar el prefijo o sufijo, simplemente establezca su anulación en ~Sin símbolo, y las reglas de diseño inteligente ajustarán la selección en consecuencia. En Adobe XD, se puede lograr lo mismo activando y desactivando la visibilidad de la capa Prefijo y/o Sufijo, y la pila se encargará de ajustar el diseño en consecuencia.

    El menú desplegable utilizado para Seleccionar admite dos tipos de elementos: encabezado y tipo de selección única. A través de encabezados es posible organizar elementos en grupos. En Figma, el componente desplegable utiliza la opción de diseño automático, que garantiza que todos los elementos se coloquen en consecuencia, una vez que oculta o agrega uno o más elementos. En Sketch, el menú desplegable utiliza un diseño inteligente que le permite ajustarse en consecuencia cuando uno o más de sus elementos están configurados en ~Sin símbolo. En Adobe XD, debe eliminar los innecesarios y el diseño se ajustará mediante el uso de una pila.

    Los elementos desplegables dentro de Seleccionar admiten cinco estados diferentes: Deshabilitado, Inactivo, Enfocado, Seleccionado y Seleccionado y enfocado. En Sketch esto se logra con Symbol Overrides, mientras que en Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre estados. En Figma, se ha agregado un estado adicional, lo que hace que haya seis estados en total: Seleccionado y Desactivado.

    `inactivo``deshabilitado``seleccionado``seleccionado y deshabilitado``seleccionado y enfocado``enfocado`

    Estilismo

    El Select viene con la flexibilidad de estilo combinada de sus elementos de entrada y desplegables. Hay opciones para el color de los elementos de texto de entrada y el estilo y color de la línea inferior. Para los elementos desplegables, se pueden cambiar los colores de fondo y texto.

    Usage

    Al utilizar Seleccionar, su entrada y menú desplegable deben tener el mismo ancho y sus bordes izquierdo y derecho deben coincidir. Cuando Seleccionar está enfocado, el menú desplegable se muestra encima o debajo de la entrada, nunca sobre la entrada, ya que el usuario siempre debe estar informado sobre la selección actual. Una vez que se selecciona un elemento de la lista, el menú desplegable se oculta. Por otro lado, el menú desplegable debe estar encima de otro contenido que se encuentre en la misma superficie que la entrada Seleccionar. Select no envía contenido como lo hace el panel de expansión.

    Hacer No

    Additional Resources

    Temas relacionados:

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