ZartUI · 单选框 规范预览

五种状态

默认 / Hover / 选中 / 禁用未选 / 禁用选中
默认(未选)
Hover
选中
禁用 · 未选
禁用 · 选中
带文字标签
规格参数
状态边框 / 背景说明
通用 — 尺寸 16×16px,圆角 50%;与右侧文字间距 6px
默认(未选) 边框 #A8B4C8;背景 #FFFFFF
Hover 边框 #3388FF;背景不变 禁用态不响应 Hover
选中 边框 #3388FF;背景 #FFFFFF 内圆点 8×8px,颜色 #3388FF
禁用(未选) 边框 #DDE1EB;背景 #F5F7FA
禁用(选中) 边框 #ADD8FF;背景 #FFFFFF 内圆点颜色 #ADD8FF

单选组

横向排列(gap: 20px)
纵向排列(gap: 12px)

卡片单选

小卡片(200px)
默认
边框 #DDE1EB
Hover
边框 #3388FF
选中
边框 #3388FF + 右上角单选框选中态
大卡片(320px)
默认
边框 #DDE1EB,右上角单选框未选态
Hover
边框 #3388FF
选中
边框 #3388FF + 右上角单选框选中态
规格参数
属性规格值
卡片默认边框1px solid #DDE1EB,圆角 8px
Hover 边框1px solid #3388FF
选中边框1px solid #3388FF
右上角单选框默认 1px solid #A8B4C8;选中 5px solid #3388FF,距卡片边缘 12px
返回组件首页