32 lines
1000 B
Plaintext
32 lines
1000 B
Plaintext
|
---
|
||
|
|
title: 添加响应式行为
|
||
|
|
description: 当 CSS 无法表达行为变化时，使用共享的断点和交互 Hooks。
|
||
|
|
order: 20
|
||
|
|
toc:
|
||
|
|
- id: breakpoints
|
||
|
|
title: 断点
|
||
|
|
- id: server-rendering
|
||
|
|
title: 服务端渲染
|
||
|
|
- id: ripple
|
||
|
|
title: 波纹交互
|
||
|
|
---
|
||
|
|
|
||
|
|
## 断点 {#breakpoints}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { useBreakpoint, useIsMobile } from "@workspace/ui/hooks/use-breakpoint"
|
||
|
|
|
||
|
|
const breakpoint = useBreakpoint()
|
||
|
|
const isMobile = useIsMobile()
|
||
|
|
```
|
||
|
|
|
||
|
|
视觉变化优先使用 CSS 响应式变体。只有组件行为或挂载内容必须变化时才使用这些 Hooks。
|
||
|
|
|
||
|
|
## 服务端渲染 {#server-rendering}
|
||
|
|
|
||
|
|
断点 Store 使用确定的桌面端服务端快照。当应用需要 CSS 与行为断点在水合前保持一致时，可用 `getBreakpointInitializationScript` 提前设置匹配的根节点类名。
|
||
|
|
|
||
|
|
## 波纹交互 {#ripple}
|
||
|
|
|
||
|
|
`useRipple` 返回一个 ref 回调，为交互元素加入指针反馈。元素应创建定位上下文，使生成的覆盖层使用正确边界。
|