본문으로 건너뛰기

사용법

컴포넌트를 연결하기 전에 조명과 서피스의 개념을 살펴보세요.

영역 선택하기

하나의 조명은 함께 반응할 서피스들을 관리합니다. 섹션 전체나 일부 요소가 같은 조명을 공유하도록 구성할 수 있습니다.

서피스(surface)는 조명에 연결된 HTML 요소입니다. 연결한 서피스만 하이라이트를 표시합니다. 독립적으로 반응할 영역에는 별도의 조명을 사용하세요.

기존 UI 유지하기

Edge는 컴포넌트의 배경, 글자, 여백과 기본 테두리를 유지합니다. 하이라이트에는 각 서피스의 글자색과 border-radius를 사용합니다. 기존 상호작용과 키보드 포커스 표시도 유지하세요.

서피스의 반응은 스타일에서, 조명의 움직임은 움직임에서 선택할 수 있습니다.

input을 감싸는 방법과 기존 하이라이트와의 충돌은 적용 시 고려사항을 참고하세요.

애플리케이션에서 요소의 위치를 직접 바꾼다면 레이아웃 변경을 참고하세요.

프레임워크 선택하기

사용하는 프레임워크에 맞는 가이드를 확인하세요.

React

bolerish/edge · 시작하기