계층 그리드

계층적 그리드 구성 요소를 사용하면 사용자가 서로 계층적으로 관련된 별도의 테이블로 구성된 방대한 양의 복잡한 데이터를 탐색하고 상호 작용할 수 있습니다. 계층 구조의 각 그리드는 자체 데이터를 표 형식으로 나타내며 Grid와 동일한 기능을 제공합니다. Hierarchical Grid는 Ignite UI for Angular와 시각적으로 동일합니다.

Hierarchical Grid Demo

Using the Hierarchical Grid in Figma

그리드와 마찬가지로 계층적 그리드는 본질적으로 시각적 계층을 형성하는 열, 행 및 중첩 그리드의 반복입니다. 계층형 그리드 구성 요소를 사용하려면 리소스 패널에서 해당 구성 요소를 검색하고 인스턴스를 삽입하기만 하면 됩니다. 필요한 경우 속성 패널에서 "디스플레이 밀도" 속성을 사용하여 디스플레이 밀도를 변경할 수 있습니다. 레이어 패널에는 다음과 같은 구조가 표시됩니다.

층	사용
🚫 컴포넌트 버전	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어에는 구성 요소의 현재 버전에 대한 정보가 포함되어 있으므로 삭제하거나 수정하지 않아야 합니다.
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
드릴 표시	활성 셀/초점이 있는 셀을 나타내는 데 사용되는 기호
그리드 2	하단 그리드 헤더의 모든 열과 셀을 포함합니다.
배경	두 번째 그리드의 배경색을 정의합니다.
그리드 1	상단 그리드의 모든 열과 셀을 포함합니다.

열이나 셀의 수를 변경하려면 레이어 패널에서 불필요한 항목을 숨기면 됩니다. 더 추가하려면 Hierarchical Grid 구성 요소를 선택하고 마우스 오른쪽 버튼을 클릭한 후 상황에 맞는 메뉴에서 "인스턴스 분리"를 선택해야 합니다. 그런 다음 원하는 그리드 모양을 얻을 때까지 기존 열 중 일부를 복제할 수 있습니다. 계층 구조를 더 많이 표시하려면 두 개의 그리드 프레임 중 하나를 복제할 수도 있습니다.

Using the Hierarchical Grid in Sketch

Sketch에서 계층형 그리드를 사용하는 가장 쉬운 방법은 미리 정의된 그리드 중 하나를 아트보드로 드래그하는 것입니다. 지원되는 세 가지 디스플레이 밀도에 사용할 수 있는 세 가지 사전 설정이 있습니다. 아트보드에서 아트보드 상단을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴 하단 근처에 있는 심볼에서 Detach from Symbol 옵션을 선택하면 새로 나타난 그룹 아래 레이어 패널에 다음이 표시됩니다.

층	사용
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
🌈 드릴 표시	활성 셀/초점이 있는 셀을 나타내는 데 사용되는 기호
머리글	헤더의 모든 셀을 포함합니다.
몸	본문의 모든 셀과 기본 구조의 중첩 그리드를 포함합니다.
🌈 배경	계층 그리드의 배경색을 정의합니다.

분리한 후 각 그리드 내에서 이미 생성한 데이터의 첫 번째 행을 복제하여 데이터의 모든 차원을 표시하는 데 필요한 헤더 수와 디자인에 표시하려는 레코드 수를 변경할 수 있습니다. 네가 가진. 계층 구조를 더 많이 표시해야 하는 경우 해당 그리드가 속한 상위 그리드의 본문 내에 추가 그리드를 중첩할 수도 있습니다.

Using the Hierarchical Grid in Adobe XD

Adobe XD에서 세 가지 사전 설정 디스플레이 밀도 계층적 그리드 구성 요소 중 하나를 선택하고 이를 아트보드로 드래그하면 구성 속도를 높이기 위해 머리글과 본문 모두에 Repeat Grid 사용하는 레이어 패널이 표시됩니다. Adobe XD의 Sketch와 달리 기호를 삭제할 필요는 없습니다. 레이어 패널에 다음이 표시되어야 합니다.

층	사용
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
🌈 드릴 표시	활성 셀을 표시하고 그리드 계층을 통해 해당 셀의 소속을 추적하는 데 사용되는 기호입니다.
머리글	모든 헤더 셀을 포함합니다. CollapseAll 셀과 나머지는 반복 그리드 헤더에 그룹화되어 있습니다.
몸	모든 본문 셀 포함: 반복 그리드로 그룹화된 확장 셀과 다른 반복 그리드로 그룹화된 나머지 셀, 기본 구조의 중첩 그리드
🌈 배경	중첩된 그리드의 배경색을 정의합니다.

반복 그리드 레이어를 선택하면 필요한 반복 셀 수를 변경할 수 있으며, 이는 각 그리드 내에서 수행할 수 있습니다. 오른쪽이나 아래쪽 가장자리에 있는 녹색 핸들을 드래그하여 데이터의 모든 차원을 표시하고 디자인에 표시하고 싶은 만큼 눈에 보이는 기록을 삽입하세요. 특정 셀 유형이나 열 너비를 변경하려면 반복 그리드 레이어를 선택하고 오른쪽 패널에서 Ungroup Grid 클릭해야 합니다. 이렇게 하면 원하는 디자인을 얻기 위해 별도로 작업할 수 있습니다. 계층 구조를 더 많이 표시해야 하는 경우 전체 그리드를 복제하여 속할 상위 그리드의 본문 내에 중첩할 수도 있습니다.

Cell Types

계층적 그리드는 세 가지 유형의 일반 그리드 셀 머리글, 본문 및 요약을 계층 구조를 구성하는 데 사용되는 두 가지 추가 항목으로 확장합니다. CollapseAll 셀은 항상 첫 번째 헤더 셀로 사용되며 해당 헤더에 나타나는 그리드의 모든 소속 레코드를 축소/확장하기 위한 사전 정의된 아이콘 및 작업과 함께 제공됩니다. 확장 셀은 항상 모든 행의 첫 번째 본문 셀로 사용되며 행 축소/확장을 위한 사전 정의된 아이콘 및 작업과 함께 제공됩니다.

일반 머리글, 본문 및 요약 셀을 다양한 유형의 데이터에 사용하고 다양한 계층적 그리드 기능을 활성화하도록 구성하는 방법을 이해하려면 일반 그리드 항목을 참조하세요.

Cell Display Density

CollapseAll 및 Expand 셀은 계층형 그리드의 세 가지 디스플레이 밀도 변형인 Comfort, Cosy 및 Compact를 지원합니다. 아래 CollapseAll 헤더 셀에서 볼 수 있듯이 각 항목에는 고유한 기호가 있습니다.

스타일링

계층형 그리드에는 개별 셀 텍스트, 아이콘 및 배경색을 사용 가능한 다양한 상태로 스타일링하고 가로 및 세로 테두리를 숨김으로써 달성할 수 있는 스타일링 유연성이 제공됩니다. 드릴 표시 및 그리드 배경의 스타일을 지정할 수도 있습니다.

Usage

그리드와 마찬가지로 계층 그리드에서 가장 중요한 것은 헤더 및 본문 셀 내부의 데이터 정렬입니다. 텍스트는 항상 왼쪽에 정렬되어야 하며 가변적인 빈 공간은 오른쪽에 남겨두고 숫자는 항상 오른쪽에 정렬되어야 하며 가변적인 빈 공간은 왼쪽에 있어야 합니다.

하다	하지 않다