shadcn_ui-decorator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Decorator

Shadcn UI — 装饰器

Instructions

使用说明

Most shadcn_ui components use a

ShadDecoration

handled by

ShadDecorator

for borders, focus state, labels, and error/description styles.

大多数shadcn_ui组件通过

ShadDecorator

处理的

ShadDecoration

来设置边框、焦点状态、标签以及错误/描述样式。

Default decoration

默认装饰

Default includes secondary border, focused ring, label/error/description styles and padding:

dart

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,
  ),
);

默认配置包含次级边框、焦点环、标签/错误/描述样式以及内边距：

dart

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,
  ),
);

Disable secondary border

禁用次级边框

By default a secondary border is drawn around focusable components. To disable it and rely on a bolder primary border:

dart

ShadThemeData(
  disableSecondaryBorder: true,
),

Note: Disabling the secondary border is not recommended; it can hurt accessibility because the focus ring helps users see which component is focused.

默认情况下，可聚焦组件周围会绘制次级边框。若要禁用它并使用更粗的主边框：

dart

ShadThemeData(
  disableSecondaryBorder: true,
),

注意： 不建议禁用次级边框；这会影响可访问性，因为焦点环能帮助用户看清当前聚焦的组件。