AX - Grupo de botones
Descripción general
AX - Grupo de botones es un componente de Experience Cloud que muestra varios botones relacionados juntos como un grupo unificado en las páginas de Experience Sites.
Úsalo para presentar acciones relacionadas una al lado de la otra, como "Guardar" y "Cancelar", "Editar" y "Eliminar", u opciones de navegación para diferentes secciones. Los botones permanecen visualmente conectados como una unidad, dejando claro que son opciones relacionadas.
Perfecto para acciones de formularios, opciones de gestión de registros, navegación tipo pestañas o cualquier lugar donde los usuarios del portal necesiten elegir entre varias acciones relacionadas.
Configurar el Grupo de Botones
Sigue estos pasos para adaptar el Componente Avonni Button Group al diseño y la funcionalidad de tu sitio de Experience Cloud perfectamente:
Configuraciones clave
Mostrar como fila
Activa esta opción para organizar los botones horizontalmente en la pantalla. Desactivarla apilará los botones verticalmente.
Botones visibles
Esta configuración determina el número máximo de botones visibles directamente en la pantalla. Si tienes más botones que el número especificado, los restantes se colocarán en un menú desplegable conveniente.
Menú de botones
Etiqueta: Establece el texto que se mostrará en el botón que abre el menú desplegable que contiene botones adicionales.
Nombre del icono: En el menú de botones, selecciona un icono apropiado (consulta Salesforce Lightning Design System para ver los iconos disponibles).
Variante: Elige el estilo visual para el menú de botones (por ejemplo, 'neutral', 'brand', 'inverse').
Alineación del menú: Selecciona cómo se posicionará el menú desplegable en relación con el botón ('left' o 'right').
Botones
Etiqueta: Introduce el texto que deseas que aparezca en el botón.
Nombre del icono: Si lo deseas, elige un icono para colocarlo en el botón.
Posición del icono: Especifica si el icono debe estar a la 'left' o 'right' de la etiqueta del botón.
Variante: Puedes seleccionar la apariencia del botón entre los estilos predefinidos ('neutral', 'brand', 'destructive', etc.).
Deshabilitado: Activa esta opción si quieres que el botón comience en un estado deshabilitado, impidiendo la interacción del usuario.
Oculto: Activa esta opción si quieres que el botón esté inicialmente oculto de la vista.
Interacción al hacer clic: Esta sección crucial te permite definir qué sucede cuando un usuario hace clic en el botón. Consulta la página de documentación "On Click Interactions" para obtener una lista completa de acciones y configuraciones posibles.
Consideraciones importantes
Diseña tu Grupo de Botones con una jerarquía visual clara en mente. Usa la variante 'brand' para enfatizar las acciones primarias.
Usa la variante 'destructive' con moderación para acciones que tengan consecuencias significativas.
Asegúrate de que las etiquetas de los botones sean concisas y describan con precisión su función.
Siempre prueba a fondo la configuración de tu Grupo de Botones en diferentes dispositivos y navegadores para garantizar una experiencia de usuario óptima.
Apariencia y estilo
El Componente Avonni Button Group ofrece opciones de estilo completas para personalizar su apariencia dentro de tu sitio de Experience Cloud. A continuación se desglosan los atributos de estilo disponibles:
Ejemplo de uso
Para crear un grupo de botones con fondo rojo, texto blanco y un sutil efecto al pasar el cursor, considera la siguiente configuración:
Etiqueta/Icono:
color: blanco
color al pasar el cursor: #f5f5f5
Fondo:
color: rojo
Borde:
color: rojo Notas importantes
Usa un selector o generador de colores web para encontrar los códigos de color que desees.
Busca la coherencia con el diseño general y la paleta de colores de tu sitio de Experience Cloud.
Siempre prueba tus cambios de estilo para asegurar el efecto visual deseado y la accesibilidad.
Última actualización
¿Te fue útil?