@nextcloud/vueNcIconSvgWrapper
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| svg | string | - | '' | |
| title | string | - | '' |
NcListItemIcon
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| title | Default first line text | string | - | |
| subtitle | Secondary optional line Only visible on size of 32 and above | string | - | '' |
| icon | Icon class to be displayed at the end of the component | string | - | '' |
| iconSvg | SVG icon to be displayed at the end of the component | string | - | '' |
| iconTitle | Descriptive title for the icon | string | - | '' |
| search | Search within the highlight of title/subtitle | string | - | '' |
| avatarSize | Set a size in px that will define the avatar height/width and therefore, the height of the component | number | - | defaultSize |
| noMargin | Disable the margins of this component. Useful for integration in Multiselect for example | boolean | - | false |
| displayName | See the Avatar displayName prop Fallback to title | string | - | null |
| isNoUser | See the Avatar isNoUser prop Enable/disable the UserStatus fetching | boolean | - | false |
| id | Unique list item ID | string | - | null |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | use this slot to add a custom icon or actions |
This is used to display a avatar-title/subtitle + icon layout
It might be used for list rendering or within the multiselect for example
Note: Any binding will be forwarded on the Avatar component root
vue
<NcListItemIcon title="User 1" />
<NcListItemIcon
title="User 1"
subtitle="Hidden subtitle because size is too small"
:avatar-size="24"
/>
vue
<NcListItemIcon title="User 1" :avatar-size="44" icon="icon-user" />
With icon
vue
<NcListItemIcon
title="Group 1"
subtitle="13 members"
icon="icon-group"
:is-no-user="true"
/>
Searching
vue
<NcListItemIcon
title="Test user 1"
subtitle="callmetest@domain.com"
search="test"
/>
<NcListItemIcon
title="Testing admin"
subtitle="testme@example.com"
search="test"
/>
<NcListItemIcon
title="Test group 2"
subtitle="loremipsum@domain.com"
icon="icon-group"
:is-no-user="true"
search="test"
/>
With actions
vue
<NcListItemIcon title="Test user 1" subtitle="callmetest@domain.com">
<NcActions>
<NcActionButton icon="icon-edit" @click="alert('Edit')">Edit</NcActionButton>
<NcActionButton icon="icon-delete" @click="alert('Delete')">Delete</NcActionButton>
</NcActions>
</NcListItemIcon>