跳到主要内容

响应式Responsive

组件默认按容器宽度自适应：能换行就换行，长文字省略，不写死宽度。在此之上有四个断点、一种统一的响应式属性写法，以及两个按自身宽度（而不是视口）判断的骨架组件。

断点

四个，都是 min-width：sm 520、md 768、lg 1024、xl 1280。没有“小于 sm”的名字，那就是默认（base）。

拖动浏览器窗口的宽度，亮起的徽标会跟着变。

sm ≥ 520md ≥ 768lg ≥ 1024xl ≥ 1280
css
/* 断点是 min-width，CSS 里直接写数值 */
@media (min-width: 520px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }

脚本里用 useBreakpoint('md')（视口不小于 768px 时为 true），常量在 BREAKPOINTS 里。它基于 matchMedia，服务端渲染时返回第二个参数 fallback（默认 true）。只是显隐或换布局的话优先用下面的纯 CSS 办法，首屏不会闪。

响应式属性 Responsive<T>

布局原语的 gap、padding、columns、align、justify、span 都接受单个值，或一个按断点给值的对象。

1
2
3
4
ts
type Responsive<T> = T | { base?: T; sm?: T; md?: T; lg?: T; xl?: T };
  • 对象写法向上补齐：{ base: 2, md: 4 } 等于 base 2、sm 2、md 4、lg 4、xl 4。
  • 没给 base 时，小于第一个给了值的断点用组件的默认值。
  • 实现上是把值写成带断点后缀的 CSS 变量，由样式表在对应的 @media 里解析，全程不需要脚本判断视口，服务端渲染出来的首屏就是对的。

Show / Hide

按断点显隐，纯 CSS：内容始终在 DOM 里，只是 display: none。包裹层是 display: contents，不参与布局。

Show above="md"：宽屏才有
Show below="md"：窄屏才有
Hide below="sm"：最窄时隐藏

被隐藏的内容对读屏也是隐藏的，但组件仍然挂载着、副作用照常运行。两套内容差别很大、或者其中一套很重时，改用 useBreakpoint 条件渲染。更多示例见 Show / Hide。

按容器宽度：AppShell 与 SplitPane

断点看的是视口。但一个组件被放进侧栏、对话框或者演示框里时，视口很宽而它自己很窄。这两个骨架组件因此能按自身宽度判断。

SplitPane

SplitPane 始终按自己的宽度决定是否堆叠（@container），stackBelow 指定阈值。

列表
详情
  • SplitPane：自身宽度小于 stackBelow（默认 md）时改成上下堆叠，分隔条不再可拖。传 stacked 可以强制。详见 SplitPane。
  • AppShell：默认看视口，小于 collapseBelow（默认 md）时侧栏变成抽屉。加上 contained 之后改为量自己的宽度，高度取 100%，抽屉也只盖住它自己，适合嵌在固定大小的区域里。详见 AppShell。
  • 其余组件不用容器查询，而是靠弹性布局自己收缩：Inline 换行、Grid 的 minItemWidth 自动填充、PageHeader 的操作区放不下时换到标题下面。

触屏

  • 触屏设备（pointer: coarse）上控件高度自动从 32 / 40 / 48 抬到 36 / 44 / 52，输入框字号变成 16px（避免 iOS 聚焦时放大页面）。
  • 悬停样式都包在 @media (hover: hover) 里，点按之后不会残留悬停态。
  • 贴边的容器（AppShell、Container、TabBar、悬浮卡片）会避开 safe-area-inset-*。
  • 对话框在各种宽度下形态不变，都从触发点放大；贴边的抽屉、面板在窄屏上铺满整宽、右上角有关闭按钮，可以朝停靠的一侧滑动关闭；通知横向撑满。

API

useBreakpoint(bp, fallback?)

属性类型默认值说明
bp*'sm' | 'md' | 'lg' | 'xl'—断点名。返回视口是否不小于它。
fallbackbooleantrue服务端渲染时返回的值。

相关的还有 useMediaQuery(query, fallback?)，用于断点之外的媒体查询。