Ui3nList

List component for displaying a collection of items with optional title and custom item rendering.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
title	string | undefined	""	List title
sticky	boolean | undefined	true	Whether to stick to top
items*	T[]	—	List items
keyField	keyof T | undefined	"id" as keyof T	Key field for items
disabled	boolean | undefined	false	Whether list is disabled

Events

Event Name	Arguments / Value Type	Description
select	{ value: T; index: number; }	Emitted when item is selected

Slots

Slot Name	Scope Props (v-slot)	Description
#title	—	Title slot
#item	{ item: T; index: number; }	Item slot

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-list-bg-color	transparent
--ui3n-list-item-height	28px
--ui3n-list-padding-block	4px

Usage Examples

Simple list

Simple list

Basic list with string items

{ "id": 1, "text": "Item 1" }

{ "id": 2, "text": "Item 2" }

{ "id": 3, "text": "Item 3" }

{ "id": 4, "text": "Item 4" }

{ "id": 5, "text": "Item 5" }

List with title

List with title

List with a sticky title

Fruits Collection (Scroll Me)

{ "code": "ap", "name": "Apple" }

{ "code": "ba", "name": "Banana" }

{ "code": "ch", "name": "Cherry" }

{ "code": "dt", "name": "Date" }

{ "code": "eb", "name": "Elderberry" }

{ "code": "fg", "name": "Fig" }

{ "code": "gr", "name": "Grape" }

{ "code": "ki", "name": "Kiwi" }

{ "code": "lm", "name": "Lemon" }

{ "code": "mn", "name": "Mango" }

Custom item slot

Custom item slot

List with custom item rendering using the item slot

System Users

#1

John Doejohn@example.com

#2

Jane Smithjane@example.com

#3

Bob Johnsonbob@example.com