Skip to content

BaseMenuEntry

Component to be used in Menu Entry List or as a sort of header element with possibility to specify title description and more

Props

Prop nameDescriptionTypeValuesDefault
entryIdAn id to allow identification needs to be specifiednumber|string-
titleitem main title
if prop isSelectable is true please always set this so
the checkbox has a label
string-''
subtextadditional text displayed directly after titlestring-''
isActivespecify if item is active - which will display a border on right side
and title in bold
boolean-false
isSelectedspecify if item is selected - this will cause the included checkbox
to be checked
boolean-false
iconspecify an icon that is displayed before the title.
see BaseIcon for available icons
string-''
descriptionText displayed at the end of the itemstring-''
selectActivecontrol if the checkboxes are visibleboolean-false
isSelectabledefine if entry is selectable - thus if checkboxes are availableboolean-false
isDisableddefine if entry is disabled - thus if checkboxes are available
will overrule prop isSelectable
boolean-false
isActivatabledefine if entry will be active upon clickboolean-true
titleBolddefine if title should be displayed in bold constantlyboolean-false
showThumbnailsdefine if thumbnail overlay should be shownboolean-true

Events

Event namePropertiesDescription
clickedEvent emitted when entry is clicked and selectActive is false (=checkbox not shown)
selectedundefined Boolean - was entry selectedEvent emitted when selectActive is true and the entry is clicked

Slots

NameDescriptionBindings
text-contentuse this slot to individualize the displayed text in the base
right-side-elementsadd custom elements on the right side of the entry row. This slot content will be rendered in place of thumbnails and select checkbox so it will effectively disable the display of selection elements and if select mode is desired, custom elements should be providedis-selected boolean - true if value is selected
thumbnailsUse this slot to supply a list of BaseIcon components that are to be shown in the right area of the menu entry as thumbnails. If using the slot make sure that showThumbnails is true.

Demo

The example entry below has three thumbnail icons. Note that icons appear stacked in columns, and each column accomodates a maximum of two icons. If you provide more thumbnails, they will continue to align according to this pattern along the x-axis, from right to left, and from top to bottom.


An example filling the row with custom content through slots text-content and right-side-elements.

For another example of using BaseMenuEntry, see BaseMenuList.