Svelte Material UI

Lists

Installation
npm i -D @smui/list
Demos
  • Cut
  • Copy
  • Paste
  • Delete
Clicked: nothing yet
A dense list with graphics
  • edit Edit
  • send Send
  • archive Archive
  • clear Delete
Clicked: nothing yet
A non-interactive list with activated item
  • Thing 1
  • Thing 2
  • Thing 3
  • Thing 4
A two-line single selection list with avatars, disabled item, and meta
  • Bruce Willis Actor info
  • Austin Powers Fictional Character info
  • Thomas Edison Inventor info
  • Stephen Hawking Scientist info 
Selected: 3 - Stephen Hawking
Programmatically select:
Programmatically focus:
A three-line list
  • FruitPhone Pro $1,000 A beautiful phone with good specs.
  • Robot Phone Max $700 Pretty much the same phone, but a different brand name and OS. It spies on you more, too.
  • Penguin Phone $220 A very weak phone that you can install literally anything on. Compile your own kernel, you nerd. :D
A list group

Actors

  • Bruce Willis
  • Tom Hanks
  • Jack Nicholson
  • Leonardo DiCaprio
  • Matt Damon

Books

  • To Kill a Mockingbird
  • The Great Gatsby
  • 1984
  • Catch-22
  • Alice's Adventures in Wonderland
Clicked: nothing yet
A multi-level list
  • Level 1 - 1
  • Level 1 - 2
  • Level 1 - 3
  • Level 1 - 4
Clicked: nothing yet
A radio list
Selected: Tom Hanks
A check list with trailing checkboxes

Also, this uses the selection change event. Try CTRL+A and shift clicking. 

Selected: Tom Hanks
Change Event Detail: No change yet.