# 入门指南 · 用法

连接组件前，先了解光照与表面。

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

<a id="share-one-light"></a>

## 选择区域

一个光照管理一组共同响应的表面。可以让整个区域共享光照，也可以只连接其中几个元素。

表面（surface）是连接到光照的 HTML 元素。只有已连接的表面会显示高光。需要独立响应的区域应使用单独的光照。

<a id="keep-your-styles"></a>

## 保留现有 UI

Edge 保留背景、文字、间距和基础边框。高光默认使用各表面的文字颜色和圆角。请保留现有交互和键盘焦点标识。

在[样式](https://edge.bolerish.com/zh/docs/styles/)中选择 表面的响应方式，在[动态效果](https://edge.bolerish.com/zh/docs/motion/)中设置光照的移动方式。

input 的包裹方式和现有装饰冲突见[集成注意事项](https://edge.bolerish.com/zh/docs/integration/#wrap-inputs-you-own)。

如果应用自行改变元素位置，请参阅[布局变化](https://edge.bolerish.com/zh/docs/integration/#refresh-after-layout-changes)。

<a id="connect-existing-components"></a>

## 选择框架

查看所用框架的指南。

[

### React





](https://edge.bolerish.com/zh/docs/react/usage/)