# 指南 · 集成注意事项

了解如何与现有伪元素、input 元素及布局变化配合使用。

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/zh/docs/integration/

<a id="choose-an-input-mode"></a>

## 选择动态效果

system 遵循减少动态效果和设备偏好。dynamic 即使在减少动态效果开启时也跟随鼠标或笔。static 保持固定方向。触摸会更新光照在视口中的位置。滚动或抬起手指后保留最后位置，界面在其下方移动时响应光照。再次触摸会更新位置。 触摸跟随也遵循所选动态模式：static 保持固定，system 在开启减少动态效果时保持固定。

<a id="understand-rendering-cost"></a>

## 了解渲染开销

每个光照最多安排一帧，先读取几何信息再写入样式，并跳过未变的输出。渐变变化仍需浏览器渲染，因此不保证帧率或耗电量。

<a id="preserve-native-interactions"></a>

## 保留原生交互

保留标签、文字对比度、基础边框和可见的键盘焦点。装饰不会捕获指针事件；输入值、选择、键盘处理和 Portal 仍由你控制。

强制颜色模式会隐藏装饰。选择、验证和可用状态应独立于高光传达。

<a id="existing-decorations"></a>

## 与现有伪元素配合使用

Edge 默认在 `::after` 上绘制高光。要保留现有的 `::after`，请设置 `pseudoElement: 'before'`。如果两个伪元素都已使用，请在外层添加容器并应用 Edge。

保留现有伪元素

```tsx
import { Edge } from '@bolerish/edge';

<Edge.Provider>
  <Edge.Surface as="article" pseudoElement="before" className="existing-after">
    Your existing ::after stays intact.
  </Edge.Surface>
</Edge.Provider>
```

<a id="wrap-inputs-you-own"></a>

## 包裹 input 元素

原生 input 无法可靠显示伪元素。请连接外围的 `label` 或 `div`，并匹配 border-radius。保留 input 的标签、焦点、验证和键盘行为。使用 `recessed` 可呈现内凹效果。

<a id="refresh-after-layout-changes"></a>

## 布局变化后刷新

尺寸变化、嵌套滚动、视口变化、字体和资源加载都会自动更新几何信息。如果只有元素位置或边框粗细变化，且未触发尺寸通知，请在新布局生效后调用 `light.refresh()`。即使指针静止也会更新。

React 中的调用方式见[light.refresh()](https://edge.bolerish.com/zh/docs/react/use-light/#refresh)。

<a id="geometry-limits"></a>

## 支持的形状和文档范围

Edge 近似模拟轴对齐矩形。不支持旋转、透视变换和跨文档 Portal。同一文档内的 Portal 可以共享光照。焦点、选择状态和验证见[无障碍](https://edge.bolerish.com/zh/docs/integration/#preserve-native-interactions)。