스타일

기존 스타일을 유지하면서 서피스가 조명에 반응하는 방식을 선택하세요.

테두리 반응 비교하기

스타일을 선택하고 카드 주변에서 포인터를 움직여 보세요. 선택한 설정은 이 사이트의 카드, 코드 블록과 내비게이션 요소에도 적용됩니다.

스타일

Raised

조명을 향한 테두리에 하이라이트를 표시합니다. 기본값입니다.

컴포넌트는 기존 색상과 레이아웃을 유지합니다.

테두리 스타일 비교

const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

JavaScript를 켜면 예제를 조작할 수 있습니다.

테두리 스타일 비교

const light = useLight();
const surface = useSurface(light, { edgeStyle: "raised" });

<Card ref={surface}>
  Your component
</Card>

스타일 값

스타일 값
값	동작
`raised`	조명을 향한 테두리에 하이라이트를 표시합니다. 기본값입니다.
`recessed`	하이라이트를 장식 테두리 두께만큼 안쪽에 그립니다. 선택한 조명 방향은 유지합니다.
`matte`	테두리 반응을 부드럽게 표현합니다.

추가 옵션은 API 레퍼런스를 참고하세요.

Raised

바깥으로 도드라지는 테두리를 표현하려면 edgeStyle: 'raised'를 사용하세요.

Recessed

input 래퍼처럼 하이라이트를 장식 테두리 두께만큼 안쪽에 그리려면 edgeStyle: 'recessed'를 사용하세요. 선택한 조명 방향은 유지합니다.

Matte

더 부드럽고 은은한 테두리를 원하면 edgeStyle: 'matte'를 사용하세요.

하이라이트 조정하기

서피스는 중첩 여부와 관계없이 자신의 글자색을 사용하며, 연결된 DOM 요소의 border-radius를 따릅니다. color로 하이라이트 색상을 바꾸고, intensity로 공유 조명의 강도를 조절할 수 있습니다. 반대쪽 테두리의 그림자를 없애려면 shadowColor="transparent"를 사용하세요. borderWidth는 하이라이트의 두께만 바꾸며 실제 테두리에는 영향을 주지 않습니다. 이 옵션들은 Edge.Surface에 전달하면 됩니다. CSS 변수를 따로 선언할 필요는 없습니다.

이 효과는 좌표축에 정렬된 직사각형을 기준으로 조명 방향을 근사합니다. 물리적으로 정확한 점광원을 재현하지는 않습니다. 서피스 중심부에서는 크기에 비례한 영역에 걸쳐 하이라이트 강도가 줄어듭니다.

기존 가상 요소와 함께 사용하거나 input을 감싸는 경우에는 적용 시 고려사항을 참고하세요.