Settings List

设置列表

A grouped list of options: each row has a name on the left and a switch, chevron, or current value on the right.

All platformsPersonalContent areaComponent

大白话说明

设置列表用分组列表承载所有低频选项:同类放一组,组间留白;行右侧按类型放开关(即时生效)、箭头(进二级页)或当前值(点开选择)。退出登录与注销账号沉到最后、标红,与其他行隔开。

什么时候用

选项超过 6 个、且大多低频时统一收进设置页——它就是为「找得到但别碍事」而生的。

什么时候不用

高频功能(每天用的开关)别埋进设置三级页;付费与安全类选项要另做确认,不要和普通开关混排误触。

细节与变体

  • 开关行点整行都能切换,不只点那个小开关(费茨定律)
  • 带箭头的行必须真的能进二级页,别用箭头装饰开关行
  • 注销账号与退出登录分开:前者要二次确认,后者一次点击

配套效果见下方「可用效果」。

Matching prompt (fill in & copy)

Effects you can apply

Reference implementations (open source)

  • Ant Design ↗ MIT · 免费(MIT)

    The de-facto standard for admin interfaces in China — tables, forms, lists.

  • TDesign ↗ MIT · 免费(MIT)

    Tencent's full-stack design system covering web, mobile, mini-programs, and desktop.

  • shadcn-admin ↗ MIT · 免费(MIT)

    A complete admin dashboard built with shadcn/ui — dashboard, settings, chat pages included.