높이

    지원되는 고도는 24개입니다. Indigo.Design 시스템 기본 콘텐츠에 그림자를 드리우기 위해 구성 요소와 패턴에서 사용되는 구성 요소입니다. 하단 탐색 및 플로팅 작업 버튼과 같은 구성 요소는 이를 사용하여 일부 시각적 계층 구조를 설정하지만 등록 또는 로그인 양식과 같이 특정 요소를 플로팅하는 데 사용할 수도 있습니다. 고도는 다음과 동일합니다. 머티리얼 디자인 엘리베이션 & Ignite UI for Angular.

    Support for Elevations

    고도는 간단한 논리를 따릅니다. 고도의 숫자가 높을수록 그림자가 더 두드러집니다. 그림자는 3가지 누적된 그림자 색상(그림자, 반그림자, 주변 색상)의 조합으로 제공되며 그 값은 머티리얼 디자인 정의와 일치합니다.

    Figma에서 입면도는 라는 ↳ Elevation 별도의 페이지에 배치됩니다. 대부분의 경우 구성 요소의 프레임 또는 구성 요소 구조 내부의 배경 레이어에 적용되며 속성 패널에서 효과 스타일로 사용할 수 있습니다. Sketch에서 입면도는 이름이 지정된 🎨 Elevation 별도의 페이지에서 찾을 수 있으며 모든 모양에 적용할 수 있는 레이어 스타일로 사용할 수 있습니다. 이를 사용하는 구성 요소에서 이 스타일을 올바른 레이어(대부분 마스크 레이어 또는 특별히 지정된 Elevation 사각형)에 적용했습니다. Adobe XD에서 입면도는 라이브러리 파일의 왼쪽 열에 있는 동일한 이름의 아트보드에 배치되며 여러 구성 요소 및 패턴에 사용되는 구성 요소로 존재합니다.

    Note

    스타일을 변경하여 구성요소의 고도를 변경하는 것은 Sketch 및 Figma에서 가능하며 예상되는 결과를 생성하지만 아직 Ignite UI for Angular 에서는 동일한 결과를 얻을 수 없습니다.

    Use of Standalone Elevations in Figma

    예를 들어 콘텐츠의 한 부분을 들어올려 나머지 부분보다 더 많은 초점을 끌어올리기 위해 고도를 자체적으로 사용하려면 별도의 배경 레이어에 효과 스타일로 적용하거나 프로젝트 내에서 프레임을 사용하는 경우에는 프레임에 직접 적용할 수 있지만 입면도를 표시하려면 채우기 색상도 적용해야 합니다.

    Use of Standalone Elevations in Sketch

    예를 들어 콘텐츠의 한 부분을 들어올리고 나머지 부분보다 더 많은 초점을 맞추기 위해 고도를 자체적으로 사용하려면 강화하려는 콘텐츠의 크기와 일치하는 직사각형에 선택한 고도 레이어 스타일을 적용하기만 하면 됩니다.

    Use of Standalone Elevations in Adobe XD

    예를 들어 콘텐츠의 한 부분을 들어 올리고 나머지 부분보다 더 많은 초점을 맞추려면 고도를 자체적으로 사용하려면 해당 부분 중 하나를 Libraries 패널에서 아트보드로 드래그하고 그 위에 추가할 표면으로 사용하면 됩니다. 배경색 레이어를 포함한 나머지 사용자 인터페이스. 예를 들어 대화 상자를 디자인할 때 모서리를 둥글게 만들고 싶을 때가 있습니다. 고도가 이에 맞춰지도록 레이어 패널에서 확장하고 세 개의 내부 레이어를 선택한 다음 모서리 반경을 원하는 값으로 설정하세요.

    Example of a Standalone Elevation

    Additional Resources

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.