Grupo de botones

    Utilice el componente de grupo de botones para combinar los activadores de algunas funciones relacionadas en un elemento de interfaz. El grupo de botones es visualmente idéntico a la Ignite UI for Angular

    Button Group Demo

    Layout

    El grupo de botones admite dos direcciones de diseño: horizontal, donde los elementos se distribuyen de izquierda a derecha, y vertical, donde su orden es de arriba a abajo.

    Buttons Amount

    En Figma, el grupo de botones utiliza un diseño automático que le permite ajustarse en consecuencia cuando elige la cantidad exacta de botones que necesita y oculta los anidados adicionales en el panel de capas. En Sketch, el grupo de botones utiliza un diseño inteligente similar a Figma y puedes ocultar los botones innecesarios configurándolos en ~Sin símbolo desde el panel de anulaciones. En Adobe XD puedes lograr lo mismo eliminando las capas innecesarias con botones, lo que ajustará automáticamente el diseño.

    Button Layout Template

    Cada botón del grupo de botones es un botón plano y permite el mismo grado de plantilla.

    Estilismo

    El grupo de botones viene con flexibilidad de estilo a través de las diversas opciones para el borde y el color de fondo, así como los colores de contorno, fondo, texto y íconos de los botones individuales.

    Usage

    Utilice siempre botones con un estilo coherente y evite combinar botones de texto con botones de iconos dentro del mismo grupo de botones. Dimensione el grupo de botones según su contenido para evitar dejar demasiado espacio vacío en los botones. Utilice el grupo de botones solo para mostrar acciones simples y relacionadas, ya que no es adecuado ni siquiera para una navegación simple. Si miras más allá de estas acciones, las pestañas son mucho más apropiadas.

    Hacer No

    Additional Resources

    Temas relacionados:

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