Svelte Material UI

列表

安装
npm i -D @smui/list
演示
  • 剪切
  • 复制
  • 粘贴
  • 删除
Clicked: nothing yet
一个带有图形的密集列表
  • edit 编辑
  • send 发送
  • archive 归档
  • clear 删除
Clicked: nothing yet
一个带有激活项目的非交互式列表
  • 事物 1
  • 事物 2
  • 事物 3
  • 事物 4
一个带有头像、禁用项目和元数据的双行单选列表
  • 布鲁斯·威利斯 演员 info
  • 奥斯汀·パワーズ 虚构人物 info
  • 托马斯·爱迪生 发明家 info
  • 史蒂芬·霍金 科学家 info
Selected: 3 - Stephen Hawking
以编程方式选择
以编程方式聚焦
一个三行列表
  • FruitPhone Pro $1,000 一部具有良好规格的漂亮手机。
  • Robot Phone Max $700 基本上是同一款手机，但品牌名称和操作系统不同。它也会更多地监视你。
  • Penguin Phone $220 一部非常弱的手机，你可以安装任何东西。编译你自己的内核，你这个书呆子。:D
一个列表组

演员

  • 布鲁斯·威利斯
  • 汤姆·汉克斯
  • 杰克·尼科尔森
  • 莱昂纳多·迪卡普里奥
  • 马特·达蒙

书籍

  • 杀死一只知更鸟
  • 了不起的盖茨比
  • 1984
  • 第22条军规
  • 爱丽丝梦游仙境
Clicked: nothing yet
多级列表
  • 一级 - 1
  • 一级 - 2
  • 一级 - 3
  • 一级 - 4
Clicked: nothing yet
单选列表
Selected: Tom Hanks
带有尾部复选框的复选框列表

此外，这还使用了选择改变事件。尝试 CTRL+A 和 shift 点击。

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