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...