# 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 name | Description | Type | Values | Default |
---|---|---|---|---|
entryId | An id to allow identification needs to be specified | number|string | - | null |
title | item main title if prop isSelectable is true please always set this sothe checkbox has a label | string | - | '' |
subtext | additional text displayed directly after title | string | - | '' |
isActive | specifiy if item is active - which will display a border on right side and title in bold | boolean | - | false |
isSelected | specify if item is selected - this will cause the included checkbox to be checked | boolean | - | false |
icon | specify an icon that is displayed before the title. see BaseIcon for available icons | string | - | '' |
description | Text displayed at the end of the item | string | - | '' |
selectActive | control if the checkboxes are visible | boolean | - | false |
isSelectable | define if entry is selectable - thus if checkboxes are available | boolean | - | false |
isDisabled | define if entry is disabled - thus if checkboxes are available will overrule prop isSelectable | boolean | - | false |
isActivatable | define if entry will be active upon click | boolean | - | true |
titleBold | define if title should be displayed in bold constantly | boolean | - | false |
showThumbnails | define if thumbnail overlay should be shown | boolean | - | true |
# Events
Event name | Properties | Description |
---|---|---|
selected | undefined Boolean - was entry selected | Event emitted when selectActive is true and the entry is clicked |
clicked | Event emitted when entry is clicked and selectActive is false (=checkbox not shown) |
# Slots
Name | Description | Bindings |
---|---|---|
text-content | use this slot to individualize the displayed text in the base | |
right-side-elements | add 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 provided | is-selected boolean - true if value is selected |
thumbnails | Use 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.