Shadcn UI — Decorator
用途 该技能面向 shadcn_ui 组件的装饰配置,主要通过 ShadDecoration 与 ShadDecorator 控制边框、焦点状态、标签以及错误和描述样式。资料指出,多数 shadcn_ui 组件使用由 ShadDecorator 处理的 ShadDecoration。需要在表单控件等场景做样式定制时可参考。
默认装饰 默认装饰包含次级边框、聚焦环,以及标签、错误、描述样式和内边距。示例代码:
ShadDecoration( secondaryBorder: ShadBorder.all( padding: const EdgeInsets.all(4), width: 0, ), secondaryFocusedBorder: ShadBorder.all( width: 2, color: colorScheme.ring, radius: radius.add(radius / 2), padding: const EdgeInsets.all(2), ), labelStyle: textTheme.muted.copyWith( fontWeight: FontWeight.w500, color: colorScheme.foreground, ), errorStyle: textTheme.muted.copyWith( fontWeight: FontWeight.w500, color: colorScheme.destructive, ), labelPadding: const EdgeInsets.only(bottom: 8), descriptionStyle: textTheme.muted, descriptionPadding: const EdgeInsets.only(top: 8), errorPadding: const EdgeInsets.only(top: 8), errorLabelStyle: textTheme.muted.copyWith( fontWeight: FontWeight.w500, color: colorScheme.destructive, ), );
禁用次级边框 默认情况下,可聚焦组件周围会绘制次级边框。若要禁用并改用更粗的主边框,可配置:
ShadThemeData( disableSecondaryBorder: true, );
注意:资料提示不建议禁用次级边框,因为焦点环能帮助用户看清哪个组件处于聚焦状态,禁用可能影响可访问性。
使用方式 在主题或组件层面配置 ShadDecoration 与 ShadDecorator;如需关闭次级边框,在 ShadThemeData 中设置 disableSecondaryBorder: true。
适用场景 适用于需要自定义 shadcn_ui 组件边框、聚焦环、标签、错误与描述文本样式、内边距的表单控件等场景。
限制 资料明确不建议禁用次级边框,原因是可能降低可访问性。其余限制暂未提供。