<List />

base/list.svelte

"List differs from menu essentially by the way you call it"
R. List, 1990
Component List examples :
Using slots
component List demo using slots
With props.data and slots
  • Primary text 0
    secondary sub-title 0
  • Primary text 1
    secondary sub-title 1
  • Primary text 2
    secondary sub-title 2
  • Primary text 3
    secondary sub-title 3
  • Primary text 4
    secondary sub-title 4
  • Primary text 5
    secondary sub-title 5
  • Primary text 6
    secondary sub-title 6
  • Primary text 7
    secondary sub-title 7
  • Primary text 8
    secondary sub-title 8
  • Primary text 9
    secondary sub-title 9
  • Primary text 10
    secondary sub-title 10
  • Primary text 11
    secondary sub-title 11
  • Primary text 12
    secondary sub-title 12
  • Primary text 13
    secondary sub-title 13
  • Primary text 14
    secondary sub-title 14
  • Primary text 15
    secondary sub-title 15
  • Primary text 16
    secondary sub-title 16
  • Primary text 17
    secondary sub-title 17
  • Primary text 18
    secondary sub-title 18
  • Primary text 19
    secondary sub-title 19
  • Primary text 20
    secondary sub-title 20
  • Primary text 21
    secondary sub-title 21
  • Primary text 22
    secondary sub-title 22
  • Primary text 23
    secondary sub-title 23
  • Primary text 24
    secondary sub-title 24
  • Primary text 25
    secondary sub-title 25
  • Primary text 26
    secondary sub-title 26
  • Primary text 27
    secondary sub-title 27
  • Primary text 28
    secondary sub-title 28
  • Primary text 29
    secondary sub-title 29
  • Primary text 30
    secondary sub-title 30
  • Primary text 31
    secondary sub-title 31
  • Primary text 32
    secondary sub-title 32
  • Primary text 33
    secondary sub-title 33
  • Primary text 34
    secondary sub-title 34
  • Primary text 35
    secondary sub-title 35
  • Primary text 36
    secondary sub-title 36
  • Primary text 37
    secondary sub-title 37
  • Primary text 38
    secondary sub-title 38
  • Primary text 39
    secondary sub-title 39
  • Primary text 40
    secondary sub-title 40
  • Primary text 41
    secondary sub-title 41
  • Primary text 42
    secondary sub-title 42
  • Primary text 43
    secondary sub-title 43
  • Primary text 44
    secondary sub-title 44
  • Primary text 45
    secondary sub-title 45
  • Primary text 46
    secondary sub-title 46
  • Primary text 47
    secondary sub-title 47
  • Primary text 48
    secondary sub-title 48
  • Primary text 49
    secondary sub-title 49
primary no title
  • primary text
    secondary text
  • Primary text 0
    secondary sub-title 0
  • Primary text 1
    secondary sub-title 1
  • Primary text 2
    secondary sub-title 2
  • Primary text 3
    secondary sub-title 3
  • Primary text 4
    secondary sub-title 4
  • Primary text 5
    secondary sub-title 5
  • Primary text 6
    secondary sub-title 6
  • Primary text 7
    secondary sub-title 7
  • Primary text 8
    secondary sub-title 8
  • Primary text 9
    secondary sub-title 9
  • Primary text 10
    secondary sub-title 10
  • Primary text 11
    secondary sub-title 11
  • Primary text 12
    secondary sub-title 12
  • Primary text 13
    secondary sub-title 13
  • Primary text 14
    secondary sub-title 14
  • Primary text 15
    secondary sub-title 15
  • Primary text 16
    secondary sub-title 16
  • Primary text 17
    secondary sub-title 17
  • Primary text 18
    secondary sub-title 18
  • Primary text 19
    secondary sub-title 19
  • Primary text 20
    secondary sub-title 20
  • Primary text 21
    secondary sub-title 21
  • Primary text 22
    secondary sub-title 22
  • Primary text 23
    secondary sub-title 23
  • Primary text 24
    secondary sub-title 24
  • Primary text 25
    secondary sub-title 25
  • Primary text 26
    secondary sub-title 26
  • Primary text 27
    secondary sub-title 27
  • Primary text 28
    secondary sub-title 28
  • Primary text 29
    secondary sub-title 29
  • Primary text 30
    secondary sub-title 30
  • Primary text 31
    secondary sub-title 31
  • Primary text 32
    secondary sub-title 32
  • Primary text 33
    secondary sub-title 33
  • Primary text 34
    secondary sub-title 34
  • Primary text 35
    secondary sub-title 35
  • Primary text 36
    secondary sub-title 36
  • Primary text 37
    secondary sub-title 37
  • Primary text 38
    secondary sub-title 38
  • Primary text 39
    secondary sub-title 39
  • Primary text 40
    secondary sub-title 40
  • Primary text 41
    secondary sub-title 41
  • Primary text 42
    secondary sub-title 42
  • Primary text 43
    secondary sub-title 43
  • Primary text 44
    secondary sub-title 44
  • Primary text 45
    secondary sub-title 45
  • Primary text 46
    secondary sub-title 46
  • Primary text 47
    secondary sub-title 47
  • Primary text 48
    secondary sub-title 48
  • Primary text 49
    secondary sub-title 49
    • footer
primary title
density preset-density
group string
code
- Using a simple dataset

<List
	let:listItem
	{data}
	density="default"
	on:listitem:click={(ce)=>console.log(ce.detail)}
	on:listitem:dblclick={(ce)=>console.log(ce.detail)}
	selectorField="name"
	style="width:190px">
		<ListItem data={listItem.data}>
			<Icon slot="listItemIcon" icon={listItem.data.icon} />
			<span slot="listItemPrimary">{listItem.data.name}</span>
			<span slot="listItemSecondary">{listItem.data.secondary}</span>
		</ListItem>
</List>
code
- Using a props.listItems declaration list

<List
	let:listItem
	{listItems}
	selectorField="primary"
	primary="Primary title"
	secondary="Secondary text"
	style="width:190px">
		<ListItem>
			<Icon  slot="icon" icon={listItem.icon} />
			<span slot="primary">{listItem.primary}</span>
			<span slot="secondary">{listItem.secondary}</span>
			<span slot="action">{null_to_empty(listItem?.action)}</span>
		</ListItem>
</List>
Api preview :
missing
Link to api :
Api for component "List"