AX - Menú de botones
Descripción general
AX - Menú de botones es un componente de Experience Cloud que muestra un menú desplegable cuando los usuarios hacen clic en un botón en las páginas de Experience Sites.
Úsalo para agrupar acciones relacionadas u opciones de navegación bajo un solo botón, como acciones de cuenta de usuario, enlaces rápidos, opciones de exportación o acciones de registro. Configura los elementos del menú manualmente o extráelos dinámicamente de los datos de Salesforce en Experience Builder.
Perfecto para navegación compacta, menús desbordados, acciones de perfil de usuario, operaciones masivas o cualquier lugar donde necesites varias opciones sin saturar la página con botones separados.
Configuración del menú de botones
El componente Menú de botones te permite crear un menú desplegable activado por un clic en un botón. Así es como puedes personalizarlo para adaptarlo a las necesidades de tu sitio:
Etiqueta
Qué hace: Establece el texto que aparece en el botón.
Ejemplo: "Navegación", "Acciones", "Más información."
Icono
Qué hace: Añade un icono visual al botón.
Cómo usarlo: Elige entre los iconos disponibles en el Lightning Design System.
Opcional: Puedes dejar esto en blanco si no quieres un icono.
Estilo del botón
Qué hace: Cambia la apariencia del botón para que coincida con el aspecto de tu sitio.
Opciones:
Neutro
Marca
Destructivo (para acciones como eliminar)
Éxito (para acciones positivas)
Más...
Ajustar la configuración de apariencia te permite personalizar aún más el aspecto de tu botón. Por ejemplo, puedes elegir la variante "Contenedor" para cambiar el color de fondo del botón a tu gusto o seleccionar el token de color predefinido para tu sitio.
Alineación del menú
Qué hace: Determina dónde aparece el menú desplegable en relación con el botón.
Opciones:
Izquierda
Derecha
Centro
Abajo a la izquierda
Más...
Activador del menú
Qué hace: Controla cómo se abre el menú.
Opciones:
Clic
Al pasar el cursor (abrir al pasar el ratón por encima)
Enfoque (abrir al recibir el foco del teclado)
Información sobre herramientas
Qué hace: Muestra información útil cuando los usuarios pasan el cursor sobre el botón.
Opcional: Déjalo en blanco si no se necesita explicación adicional.
Ocultar flecha hacia abajo
Qué hace: Elimina la flecha apuntando hacia abajo que normalmente se muestra en los botones de menú.
Opcional: Marca esta casilla si prefieres un aspecto más limpio.
Extender al ancho completo
Qué hace: Hace que el botón se expanda para ocupar todo el ancho disponible.
Opcional: Marca esta casilla si quieres un botón más grande.
Deshabilitar botón
Qué hace: Hace temporalmente que el botón y el menú no se puedan usar.
Opcional: Marca esta casilla para impedir que los usuarios interactúen con él.,
Nubbin del menú
El nubbin del menú es un pequeño triángulo sutil junto a los elementos del menú dentro de un menú de botones.
Conecta visualmente el elemento del menú con el botón que abre el menú, guiando la mirada del usuario.
Esto ayuda a los usuarios a identificar rápidamente qué elemento del menú está asociado a un botón concreto, mejorando la experiencia general del usuario.
Elementos del menú
Qué hace: Define los enlaces o acciones en el menú desplegable.
Cómo usarlo: Añade elementos con etiquetas (el texto mostrado) y un icono si es necesario.
Configurar la navegación del elemento
Para hacer interactivo tu menú de botones, tendrás que indicar a cada elemento del menú a dónde ir cuando alguien haga clic en él. Esto se hace en la sección "Enlace a". Puedes obtener más información sobre los distintos tipos de acciones que puedes activar desde el menú de botones aquí.
Configuración de apariencia
Estos ajustes te permiten personalizar visualmente tu menú de botones para que coincida con el diseño y la imagen de marca de tu sitio.
Espaciado
Qué hace: Controla el espacio alrededor del botón.
Cómo usarlo: Usa controles deslizantes o campos numéricos para ajustar los valores de espaciado superior, inferior, izquierdo y derecho.
Etiqueta e icono
Color: Elige el color predeterminado cuando el botón esté activo (se haga clic o se pase el cursor sobre él) y un color al pasar el cursor.
Familia tipográfica: Selecciona la fuente para el texto de la etiqueta (por ejemplo, Arial, Times New Roman, Verdana).
Tamaño de fuente: Ajusta el tamaño del texto de la etiqueta usando un control deslizante o un campo numérico.
Estilo de fuente: Elige texto normal, cursiva o inclinado.
Peso de fuente: Haz que el texto sea ligero, normal, medio, negrita o extra negrita.
Alineación horizontal: Decide si el icono debe estar a la izquierda o a la derecha del texto de la etiqueta.
Fondo
Color: Elige el color predeterminado del fondo del botón cuando esté activo y el color al pasar el cursor cuando esté inactivo.
Borde
Elige el color predeterminado cuando el botón esté activo y el color al pasar el cursor para el borde que rodea el botón.
Tamaño: Ajusta el grosor del borde usando un control deslizante o un campo numérico.
Estilo: Elige entre un borde sólido, discontinuo, punteado o doble.
Radio: Puedes ajustar la redondez de las esquinas usando un control deslizante o un campo numérico (un valor más alto hace que las esquinas sean más redondeadas).
Imagen (para elementos del menú)
Color del borde: Elige el color del borde alrededor de las imágenes de los elementos del menú (si tienen uno).
Tamaño: Ajusta el tamaño de las imágenes de los elementos del menú usando un control deslizante o un campo numérico.
Estilo: Elige un estilo normal, cursiva o inclinado para los pies de foto de las imágenes (si los hay).
Radio: Ajusta la redondez de las esquinas de las imágenes de los elementos del menú usando un control deslizante o un campo numérico.
Ajuste del objeto: Decide cómo debe encajar la imagen dentro de su contenedor (por ejemplo, rellenar, contener, cubrir).
Consideraciones importantes
Estilo: Personaliza el aspecto y la sensación del menú de botones para que coincida con la imagen de marca de tu sitio.
Enlace a: Considera añadir la interacción "Enlace a" para gestionar las interacciones de los usuarios con los elementos del menú.
Última actualización
¿Te fue útil?