Lists

List props

List item props

prop	description	type	Default value
value	Selected item value	String	empty string
items	List items (item has id, value, to and text props)	Array	[]
dense	Dense variant	Boolean	false
navigation	Is navigation drawer list	Boolean	false
select	Is dropdown selet	Boolean	false

One-line

Item 1
Item 2
Item 3

Two-line

Item 1

Subheading 1
Item 2

Subheading 2
Item 3

Subheading 3

Dense

Item 1

Subheading 1
Item 2

Subheading 2
Item 3

Subheading 3

<script>
  import { List } from "smelte";

  const listOneLine = [{
		text: 'Item 1',
		icon: 'favorite',
	}, {
		text: 'Item 2',
		icon: 'favorite',
	}, {
		text: 'Item 3',
		icon: 'favorite',
	}];
	
	const listTwoLines = [{
		text: 'Item 1',
		icon: 'favorite',
		subheading: 'Subheading 1',
	}, {
		text: 'Item 2',
		icon: 'favorite',
		subheading: 'Subheading 2',
	}, {
		text: 'Item 3',
		icon: 'favorite',
		subheading: 'Subheading 3',
	}];

	let selected = false;
</script>

<h6 class="mb-3 mt-6">One-line</h6>
<List items={listOneLine} />
<h6 class="mb-3 mt-6">Two-line</h6>
<List items={listTwoLines} />

<h6 class="mb-3 mt-6">Dense</h6>
<List dense items={listTwoLines} />

Custom list element using let:slots

I selected nothing.

🙅‍ Text fields
🙅‍ Buttons
🙅‍ Checkboxes
🙅‍ Radio buttons
🙅‍ Switches
🙅‍ Lists

<script>
  import { List } from "smelte";

  const menu = [
		{ to: "/components/text-fields", text: 'Text fields' },
		{ to: "/components/buttons", text: 'Buttons' },
		{ to: "/components/selection-controls#checkboxes", text: 'Checkboxes' },
		{ to: "/components/selection-controls#radio-buttons", text: 'Radio buttons' },
		{ to: "/components/selection-controls#switches", text: 'Switches' },
		{ to: "/components/lists", text: 'Lists' },
  ];

  let selected;

</script>

<List bind:value={selected} items={menu} dense navigation>
	<li slot="item" let:item={item}>
		<div
			class="cursor-pointer p-4 border-alert-50 border my-2 border-solid" 
			on:click={() => selected = item.text}
			class:bg-alert-50={selected === item.text}
		>
			{selected === item.text ? '👌' : '🙅‍'} {item.text}
		</div>
	</li>
</List>