开关行

Switch Row

左边一行字、右边一个开关的设置行:点一下立刻生效,不需要保存按钮。

全平台通用表单与输入内容区组件

大白话说明

开关行是二值设置的标准形态:标题说清控制什么,副文案解释开/关的后果,开关即时生效。关掉重要功能(如备份、安全)时要二次确认或给出影响说明。

什么时候用

设置项是明确的开/关二值、且切换无副作用或副作用可即时撤销时。

什么时候不用

选项不是二值(低/中/高)时别用开关凑合,用分段控制;需要生效延迟的(重启后生效)要在副文案写明。

细节与变体

  • 点整行都能切换,开关本体只是视觉指示
  • 禁用态开关要连同标题一起置灰,并说明为什么不可用
  • 开关颜色只用一套语义:开=主色,别有的绿有的蓝

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

配套提示词(点开填空、复制)

可用效果

参考实现(开源)

  • Ant Design(蚂蚁) ↗ MIT · 免费(MIT)

    国内中后台的事实标准:表格、表单、列表都是行业参照物。

  • TDesign(腾讯) ↗ MIT · 免费(MIT)

    腾讯出品的全栈设计系统:Web、移动、小程序、桌面都有,国内生态最完整的一套。

相关条目