Menu

Menu es un componente para mostrar una lista de acciones u opciones en un formato desplegable. Se puede usar en varios contextos, como navegación, configuración o menús contextuales.

Este componente se basa en la biblioteca Floating UI para el posicionamiento. Proporciona una API flexible para crear estructuras de menú complejas, incluidos menús anidados, elementos seleccionables y elementos deshabilitados.

Para crear un menú, necesitarás usar los siguientes componentes:

• Menu: El componente raíz que crea todo el estado y proporciona contexto a sus elementos hijos.
• MenuTrigger: Maneja toda la lógica del elemento activador que abre el menú. Usa un patrón de render prop para proporcionar las propiedades y el estado necesarios al elemento activador.
• ContextMenuTrigger: Una variante de MenuTrigger diseñada para usarse en menús contextuales. Adjunta el menú a un elemento especificado y se abre con clic derecho.
• MenuPopover: El contenedor del contenido del menú. Maneja el posicionamiento y la accesibilidad del menú.
• MenuList: Un contenedor para la lista de elementos del menú.
• MenuItem: Representa un único elemento del menú. Puede ser una acción simple o un activador para un menú anidado.
• SplitButton or Button: El elemento activador del menú.

Otros componentes que se pueden usar dentro del menú incluyen:

• MenuGroup: Un contenedor para agrupar elementos relacionados del menú, con un encabezado opcional.
• MenuDivider: Un separador visual entre elementos o grupos del menú.
• MenuItemCheckbox: Un elemento del menú que se puede marcar o desmarcar.
• MenuItemSwitch: Un elemento del menú que se puede activar o desactivar.
• MenuItemRadio: Un elemento del menú que se puede seleccionar como parte de un grupo de opciones de radio.

Uso

Para adjuntar correctamente los eventos al elemento activador, debes envolver el elemento con el children() snippet . Esto te permite vincular las propiedades y el estado necesarios a tu elemento activador, asegurando que el menú se abra y se cierre como se espera.

<script>
	import { Button, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuItem, MenuDivider } from 'fluentui-svelte';
</script>

<Menu>
	<MenuTrigger>
		{#snippet children({ state, menuTriggerProps })}
			<Button bind:ref={state.ref} {...menuTriggerProps}>Open Menu</Button>
		{/snippet}
	</MenuTrigger>
	<MenuPopover>
		<MenuList>
			<MenuGroup header="Group 1">
				<MenuItem>Item 1</MenuItem>
				<MenuItem>Item 2</MenuItem>
			</MenuGroup>
			<MenuDivider />
			<MenuGroup header="Group 2">
				<MenuItem>Item 3</MenuItem>
				<MenuItem>Item 4</MenuItem>
			</MenuGroup>
		</MenuList>
	</MenuPopover>
</Menu>

Más ejemplos

Menú con elementos seleccionables y submenús anidados

<Menu hasCheckmarks hasIcons {checkedValues} onCheckedValueChange={(e, value) => (checkedValues = value)}>
	<MenuTrigger>
		{#snippet children({ state, menuTriggerProps })}
			<Button isMenuButton bind:ref={state.ref} {...menuTriggerProps}>
				<AccessTimeRegular /> Open Menu
			</Button>
		{/snippet}
	</MenuTrigger>
	<MenuPopover>
		<MenuList>
			<MenuItem subText="An explanation here">Item With Subtext</MenuItem>
			<MenuDivider />
			<MenuItem disabled>I'm Disabled</MenuItem>
			<MenuItemCheckbox name="item4" value="item4" icon={AccessTimeRegular}>I'm a checkbox</MenuItemCheckbox>
			<MenuItemSwitch>I'm a switch</MenuItemSwitch>
			<MenuItemRadio name="item6" value="item6" icon={AccessTimeRegular}>I'm a radio</MenuItemRadio>
		</MenuList>
	</MenuPopover>
</Menu>

Menú con un activador SplitButton

<Menu>
	<MenuTrigger>
		{#snippet children({ state, menuTriggerProps, primaryButtonProps })}
			<SplitButton
				bind:menuTriggerRef={state.ref}
				{menuTriggerProps}
				primaryButtonProps={{ onclick: () => alert('Primary action'), ...primaryButtonProps }}
			>
				Primary Action
			</SplitButton>
		{/snippet}
	</MenuTrigger>
	<MenuPopover>
		<MenuList>
			<MenuItem>Item 1</MenuItem>
			<MenuItem>Item 2</MenuItem>
		</MenuList>
	</MenuPopover>
</Menu>

Menú contextual

Esta variante del componente MenuTrigger te permite crear menús contextuales que se abren con clic derecho. Puedes especificar el elemento al que debe adjuntarse el menú contextual usando la propiedad ref . Si no se proporciona ningún elemento, se adjuntará a document.body de forma predeterminada.

<div bind:this={contextMenuBox} style="width: 100%; height: 200px; border: 1px dashed var(--fs-control-stroke-default); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
  Right click anywhere in this box to open the context menu.
</div>
<Menu>
  <ContextMenuTrigger ref={contextMenuBox} />
  <MenuPopover>
    <MenuList>
      <MenuGroup header="Group 1">
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
      </MenuGroup>
      <MenuDivider />
      <MenuGroup header="Group 2">
        <MenuItem>Item 3</MenuItem>
        <MenuItem>Item 4</MenuItem>
      </MenuGroup>
    </MenuList>
  </MenuPopover>
</Menu>

Propiedades del componente (Menu)

Propiedades del componente (MenuTrigger)

Propiedades del componente (MenuItem)

Propiedades del componente (MenuItemCheckbox/Switch/Radio)

Propiedades del componente (MenuGroup)