@nextcloud/vueNcListItem
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
vue
<template>
<ul>
<NcListItem
:title="'Title of the element'"
:bold="false"
:details="'1h'"
:counter-number="44"
counterType="highlighted"
>
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subtitle>
In this slot you can put both text and other components such as icons
</template>
<template #indicator>
<!-- Color dot -->
<CheckboxBlankCircle :size="16" fill-color="#0082c9" />
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:title="'Title of the element'"
:bold="false"
:force-display-actions="true"
:details="'1h'"
:counter-number="44"
counterType="highlighted"
>
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subtitle>
In this slot you can put both text and other components such as icons
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem :title="'Title of the element'" :bold="false">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subtitle>
In this slot you can put both text and other components such as icons
</template>
<template #indicator>
<!-- Color dot -->
<CheckboxBlankCircle :size="16" fill-color="#0082c9" />
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
<NcActionButton>
Button three
</NcActionButton>
</template>
</NcListItem>
<NcListItem :title="'Title of the element'" :bold="false" :details="'1h'">
<template #icon>
<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #subtitle>
In this slot you can put both text and other components such as icons
</template>
<template #indicator>
<!-- Color dot -->
<CheckboxBlankCircle :size="16" fill-color="#0082c9" />
</template>
</NcListItem>
</ul>
</template>
<script>
import CheckboxBlankCircle from "vue-material-design-icons/CheckboxBlankCircle";
export default {
components: {
CheckboxBlankCircle
}
};
</script>
NcListItem compact mode
<ul style="width: 350px;">
<NcListItem
:title="'Title of the element'"
:counter-number="1"
:compact="true" >
<template #icon>
<div class="icon-edit" />
</template>
<template #subtitle>
This one is with subtitle
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:title="'Title of the element'"
:compact="true" >
<template #icon>
<div class="icon-edit" />
</template>
</NcListItem>
<NcListItem
:title="'Title of the element'"
:counter-number="3"
:compact="true" >
<template #icon>
<div class="icon-edit" />
</template>
<template #subtitle>
This one is with subtitle
</template>
<template #actions>
<NcActionButton>
Button one
</NcActionButton>
<NcActionButton>
Button two
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:title="'Title of the element'"
:compact="true"
:counter-number="4"
href="https://nextcloud.com">
<template #icon>
<div class="icon-edit" />
</template>
<template #subtitle>
This one is with an external link
</template>
</NcListItem>
</ul>