NcListItem
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
details | The details text displayed in the upper right part of the component | string | - | '' |
title | Title (first line of text) | string | - | |
exact | Pass in true if you want the matching behavior tobe non-inclusive: https://router.vuejs.org/api/#exact | boolean | - | false |
to | The route for the router link. | string|object | - | '' |
href | The value for the external link | string | - | '#' |
anchorId | Id for the <a> element | string | - | '' |
bold | Make subtitle bold | boolean | - | false |
compact | Show the NcListItem in compact design | boolean | - | false |
active | Toggle the active state of the component | boolean | - | false |
linkAriaLabel | Aria label for the wrapper element | string | - | '' |
actionsAriaLabel | Aria label for the actions toggle | string | - | '' |
counterNumber | If different from from 0 this component will display the NcCounterBubble component | number|string | - | 0 |
counterType | Outlined or highlighted state of the counter | string | highlighted , outlined | '' |
forceDisplayActions | To be used only when the elements in the actions menu are very important | boolean | - | false |
Events
Event name | Properties | Description |
---|---|---|
click | ||
update:menuOpen |
Slots
Name | Description | Bindings |
---|---|---|
icon | This slot is used for the NcAvatar or icon | |
subtitle | Slot for the second line of the component | |
indicator | This slot is used for some indicator in form of icon | |
actions | Provide the actions for the right side quick menu | |
extra |
Default Usage
loading...
NcListItem compact mode
loading...