shadcn_ui-responsive

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Responsive

Shadcn UI — 响应式布局

Instructions

使用说明

Responsiveness is built into shadcn_ui via

ShadThemeData.breakpoints

. Use

ShadResponsiveBuilder

context.breakpoint

to branch on the current breakpoint.

shadcn_ui通过

ShadThemeData.breakpoints

内置了响应式能力。你可以使用

ShadResponsiveBuilder

或

context.breakpoint

根据当前断点进行分支处理。

Default breakpoints

默认断点

dart

ShadThemeData(
  breakpoints: ShadBreakpoints(
    tn: 0,    // tiny
    sm: 640,  // small
    md: 768,  // medium
    lg: 1024, // large
    xl: 1280, // extra large
    xxl: 1536, // extra extra large
  ),
);

dart

ShadThemeData(
  breakpoints: ShadBreakpoints(
    tn: 0,    // 极小屏
    sm: 640,  // 小屏
    md: 768,  // 中屏
    lg: 1024, // 大屏
    xl: 1280, // 超大屏
    xxl: 1536, // 极超大屏
  ),
);

Current breakpoint

获取当前断点

With ShadResponsiveBuilder:

dart

ShadResponsiveBuilder(
  builder: (context, breakpoint) {
    final sm = breakpoint >= ShadTheme.of(context).breakpoints.sm;
    // ...
  },
),

With context (equivalent):

dart

final sm = context.breakpoint >= ShadTheme.of(context).breakpoints.sm;

Use

>=

so that e.g. "sm" applies to small and larger viewports (Tailwind-style). Use

==

only when you need to match a single breakpoint.

使用ShadResponsiveBuilder：

dart

ShadResponsiveBuilder(
  builder: (context, breakpoint) {
    final sm = breakpoint >= ShadTheme.of(context).breakpoints.sm;
    // ...
  },
),

使用context（效果相同）：

dart

final sm = context.breakpoint >= ShadTheme.of(context).breakpoints.sm;

建议使用

>=

运算符，这样“sm”样式会应用于小屏及更大尺寸的视口（类似Tailwind的风格）。仅当你需要匹配单个断点时，才使用

==

运算符。

Sealed class switch

密封类switch判断

The breakpoint is a sealed type; you can switch on it:

dart

ShadResponsiveBuilder(
  builder: (context, breakpoint) {
    return switch (breakpoint) {
      ShadBreakpointTN() => const Text('Tiny'),
      ShadBreakpointSM() => const Text('Small'),
      ShadBreakpointMD() => const Text('Medium'),
      ShadBreakpointLG() => const Text('Large'),
      ShadBreakpointXL() => const Text('Extra Large'),
      ShadBreakpointXXL() => const Text('Extra Extra Large'),
    };
  },
),

断点是密封类型，你可以通过switch语句进行判断：

dart

ShadResponsiveBuilder(
  builder: (context, breakpoint) {
    return switch (breakpoint) {
      ShadBreakpointTN() => const Text('极小屏'),
      ShadBreakpointSM() => const Text('小屏'),
      ShadBreakpointMD() => const Text('中屏'),
      ShadBreakpointLG() => const Text('大屏'),
      ShadBreakpointXL() => const Text('超大屏'),
      ShadBreakpointXXL() => const Text('极超大屏'),
    };
  },
),