AX - Menú de Botones
Visión general
AX - Menú de botón 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 sobre registros. Configura los elementos del menú manualmente o extráelos dinámicamente desde los datos de Salesforce en Experience Builder.
Perfecto para navegación compacta, menús de desbordamiento, acciones de perfil de usuario, operaciones en masa o cualquier lugar donde necesites múltiples opciones sin sobrecargar la página con botones separados.
Configuración del Menú de Botón
El componente Menú de Botón te permite crear un menú desplegable activado por el clic de un botón. Aquí tienes cómo 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 usar: Elige entre los iconos disponibles en el Lightning Design System.
Opcional: Puedes dejar esto en blanco si no quieres un icono.
Estilo de botón
Qué hace: Cambia la apariencia del botón para que coincida con el aspecto y la sensación 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
Inferior-izquierda
Más...
Disparador del menú
Qué hace: Controla cómo se abre el menú.
Opciones:
Clic
Pasar el ratón (abrir al pasar el cursor)
Enfoque (abrir al enfocarse con el teclado)
Tooltip
Qué hace: Muestra información útil cuando los usuarios pasan el cursor sobre el botón.
Opcional: Deja 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.
Estirar a ancho completo
Qué hace: Hace que el botón se expanda para ocupar todo el ancho disponible.
Opcional: Marca esta casilla si deseas un botón más grande.
Desactivar botón
Qué hace: Hace que el botón y el menú sean inutilizables temporalmente.
Opcional: Marca esta casilla para evitar que los usuarios interactúen con él.,
Nubbin del menú
El nubbin del menú es un pequeño y sutil triángulo junto a los elementos del menú dentro de un menú de botón.
Conecta visualmente el elemento del menú con el botón que abre el menú, guiando la vista del usuario.
Esto ayuda a los usuarios a identificar rápidamente cuál elemento del menú está asociado con un botón en particular, mejorando la experiencia de usuario en general.
Elementos del menú
Qué hace: Define los enlaces o acciones en el menú desplegable.
Cómo usar: Agrega elementos con etiquetas (el texto mostrado) y un icono si es necesario.
Configurar navegación del elemento
Para que tu menú de botón sea interactivo, necesitas indicar a cada elemento del menú a dónde ir cuando alguien hace clic en él. Esto se hace en la sección "Vincular a". Puedes obtener más información sobre el diferentes tipos de acciones que puedes activar desde el menú de botón aquí.
Configuración de apariencia
Estas configuraciones te permiten personalizar visualmente tu menú de botón para que coincida con el diseño y la marca de tu sitio.
Espaciado
Qué hace: Controla el espacio alrededor del botón.
Cómo usar: Usa deslizadores o entradas numéricas para ajustar los valores de espaciado superior, inferior, izquierdo y correcto.
Etiqueta e icono
Color: Elige el color predeterminado para cuando el botón esté activo (clicado o con el cursor encima) 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 deslizante o una entrada numérica.
Estilo de fuente: Elige texto normal, cursiva u oblicuo.
Grosor de fuente: Haz el texto 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 para el fondo del botón cuando está activo y el color al pasar el cursor cuando está inactivo.
Borde
Elige el color predeterminado para cuando el botón está activo y el color al pasar el cursor para el borde alrededor del botón.
Tamaño: Ajusta el grosor del borde usando un deslizante o una entrada numérica.
Estilo: Elige entre un borde sólido, discontinuo, punteado o doble.
Radio: Puedes ajustar la redondez de las esquinas usando un deslizante o una entrada numérica (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 las tienen).
Tamaño: Ajusta el tamaño de las imágenes de los elementos del menú usando un deslizante o una entrada numérica.
Estilizado: Elige estilizado normal, cursiva u oblicuo para los subtítulos 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 deslizante o una entrada numérica.
Ajuste del objeto: Decide cómo debe ajustarse la imagen dentro de su contenedor (por ejemplo, rellenar, contener, cubrir).
Consideraciones importantes
Estilizado: Personaliza la apariencia del menú de botón para que coincida con la marca de tu sitio.
Vincular a: Considera agregar la interacción "Vincular a" para gestionar las interacciones de los usuarios con los elementos del menú.
Última actualización
¿Te fue útil?