Skip to content
On this page

NcListItem

Props

Prop nameDescriptionTypeValuesDefault
detailsThe details text displayed in the upper right part of the componentstring-''
titleTitle (first line of text)string-
exactPass in true if you want the matching behavior to
be non-inclusive: https://router.vuejs.org/api/#exact
boolean-false
toThe route for the router link.string|object-''
hrefThe value for the external linkstring-'#'
anchorIdId for the <a> elementstring-''
boldMake subtitle boldboolean-false
compactShow the NcListItem in compact designboolean-false
activeToggle the active state of the componentboolean-false
linkAriaLabelAria label for the wrapper elementstring-''
actionsAriaLabelAria label for the actions togglestring-''
counterNumberIf different from from 0 this component will display the
NcCounterBubble component
number|string-0
counterTypeOutlined or highlighted state of the counterstringhighlighted, outlined''
forceDisplayActionsTo be used only when the elements in the actions menu are very importantboolean-false

Events

Event namePropertiesDescription
click
update:menuOpen

Slots

NameDescriptionBindings
iconThis slot is used for the NcAvatar or icon
subtitleSlot for the second line of the component
indicatorThis slot is used for some indicator in form of icon
actionsProvide the actions for the right side quick menu
extra

Default Usage

loading...

NcListItem compact mode

loading...