ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

feat(ui5-menu): selectable menu items

Open NHristov-sap opened this issue 4 months ago • 0 comments

This PR introduces MenuItemGroup component that can hold regular MenuItem components. The MenuItemGroup has a property named itemSelectionMode which can have values among None (default), SingleSelect and MultiSelect. MenuItemGroup can be slotted in a Menu or MenuItem default slot as any other regular MenuItem. Nesting of MenuItemGroups is not allowed, but any Menu or MenuItem can contain more than one MenuItemGroup components with different itemSelectionMode settings.

When itemSelectionMode is:

  • None, the Menu acts exactly like until now.
  • SingleSelect means that zero or one MenuItems can be selected at a time.
  • MultiSelect means that zero or many MenuItems can be selected at a time.

There is also new property isSelected introduced in MenuItem. By setting it the item is marked as selected and this is visualized as checkmark at the end of the item. This property is taken into account only when the corresponding item is a member of MenuItemGroup with SingleSelect or MultiSelect value of itemSelectionMode.

image

It is recommended to place separators before and after each MenuItemGroup, but this is not mandatory and depends on the application developers.

NHristov-sap avatar Oct 15 '24 12:10 NHristov-sap