그리드

Grid Component를 사용하면 사용자가 테이블 레이아웃으로 시각적으로 표현된 방대한 양의 복잡한 데이터를 탐색하고 상호 작용할 수 있으며 필터링, 정렬, 페이징 등의 수단을 제공합니다. Grid는 Ignite UI for Angular와 시각적으로 동일합니다.

Grid Demo

Using the Grid in Figma

Grid는 기본적으로 열과 행의 반복기로, 테이블 형식 레이아웃으로 데이터를 표시합니다. 따라서 가장 쉬운 사용 방법은 사전 정의된 그리드 중 하나를 프레임으로 드래그하는 것입니다 - 지원되는 세 가지 크기에 대해 사용할 수 있는 세 가지 사전 설정이 있습니다. Figma에서 Grid Component는 열을 기반으로 하는 구조를 가지고 있으므로 전체 열을 즉시 삭제하거나 숨길 수 있지만 전체 행은 삭제할 수 없습니다. 그리드를 삽입하면 헤더 및 본문 셀을 편집하거나 그리드의 전체 너비 크기를 조정할 수 있습니다. 그러나 열이나 행을 제거하거나 열의 너비를 변경하는 등 그리드 구조를 추가로 조정하려면 그리드를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴 하단에 있는 옵션을 사용해야 Detach instance 합니다. layers 패널에서 구성 요소의 이름 아래에 다음과 같은 구조를 볼 수 있으며, 미리 분리할 필요가 없습니다.

층	사용
🚫 컴포넌트 버전	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하며 구성 요소 버전에 대한 정보를 보유합니다. 삭제하거나 수정하지 마십시오.
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
열(번호)	특정 열 내부의 머리글 및 본문 셀을 포함합니다.
머리글	특정 헤더 셀을 포함합니다.
본문(번호)	특정 신체 세포가 포함되어 있습니다.

분리한 후 기존 열을 복제하여 그리드 내부의 열 수를 늘릴 수 있습니다. 본문 셀 수를 늘리려면 먼저 특정 열에 Detach instance 옵션을 사용한 다음 열 내부에 이미 존재하는 본문 셀을 복제해야 합니다. 열이나 셀 수를 늘리거나 줄인 후에는 그리드 구성 요소의 크기를 수동으로 조정해야 합니다.

Using the Grid in Sketch

Sketch에서 그리드 구성 요소를 사용하려면 미리 정의된 그리드 중 하나를 아트보드에 삽입할 수 있습니다. 지원되는 세 가지 디스플레이 밀도에 대해 세 가지 사전 설정을 사용할 수 있습니다. 아트보드에 들어가면 상단을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴 하단 근처에 있는 옵션을 선택하면 Detach from Symbol 새로 나타난 그룹 아래의 레이어 패널에 다음이 표시됩니다.

층	사용
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
열(번호)	특정 열 내부의 머리글 및 본문 셀을 포함합니다.
머리글	헤더의 모든 셀을 포함합니다.
본문(번호)	특정 신체 세포가 포함되어 있습니다.

분리한 후에는 데이터의 모든 차원을 표시하기 위해 필요한 헤더 수를 변경할 수 있으며, 이미 생성한 데이터 행 중 하나를 복제하여 디자인에 표시하고 싶은 만큼 눈에 보이는 레코드를 삽입할 수 있습니다. 가지다.

Using the Grid in Adobe XD

Adobe XD에서 세 가지 사전 설정된 디스플레이 밀도 그리드 구성 요소 중 하나를 선택하여 아트보드로 드래그하면 레이어 패널에서 구성 속도를 높이기 위해 헤더와 본문 모두에 사용하는 Repeat Grid 것을 확인할 수 있습니다. Sketch와 달리 Adobe XD에서는 심볼을 삭제할 필요가 없습니다. 레이어 패널에 다음이 표시되어야 합니다.

층	사용
🚫 메타데이터	금지된 아이콘으로 시작하는 특수 잠긴 레이어입니다. 이 레이어는 코드 생성에 필요하므로 삭제하거나 수정하지 않아야 합니다.
머리글	헤더 반복 그리드에 그룹화된 모든 헤더 셀을 포함합니다.
몸	신체 반복 그리드에 그룹화된 모든 신체 세포를 포함합니다.

머리글 또는 본문 반복 그리드 레이어를 선택할 때 오른쪽 또는 아래쪽 가장자리에 있는 녹색 핸들을 드래그하여 데이터의 모든 차원을 표시하고 표시되는 레코드를 원하는 만큼 삽입하여 필요한 반복 셀 수를 변경할 수 있습니다. 당신의 디자인에 표시합니다. 특정 셀 유형이나 열 너비를 변경하려면 반복 그리드 레이어를 선택하고 오른쪽 패널에서 Ungroup Grid 클릭해야 합니다. 이렇게 하면 셀을 개별적으로 작업하여 원하는 디자인을 얻을 수 있습니다.

Cell Types

그리드는 서로 다른 데이터 시각화 목적으로 사용되는 세 가지 유형의 셀을 제공합니다. 머리글 셀은 열당 하나만 있으며 그리드 상단에 나타나 해당 특정 열의 데이터에 대한 텍스트 설명을 표시합니다. Body Cell은 콘텐츠 테이블을 구축하고 데이터 레코드를 표시하는 데 사용되며 해당 유형은 다양할 수 있습니다. 요약 셀은 그리드 하단에 개수, 최소값, 최대값 등 각 차원에 대한 요약 열이 표시되는 섹션을 만드는 데 사용됩니다.

또한 행 필터링 기능을 활성화하기 위해 헤더 하단에 추가 헤더 행을 만드는 데 사용되는 행 필터 헤더 셀이라는 특수 하위 유형의 헤더 셀도 있습니다.

Cell Size

Header, Body 및 Summary Cells는 Grid 구성 요소의 크기에 따라 Large, Medium 및 Small의 세 가지 변형을 지원합니다. Sketch 에서는 각 기호가 고유한 기호와 함께 제공되는 반면, Figma 에서는 셀의 크기와 내부 내용이 속성 패널과 별도로 변경할 수 있는 속성입니다.

Note

특정 크기의 그리드 구성 요소를 선택한 후에는 그리드 셀의 크기를 변경하지 않는 것이 좋습니다.

Items and Features (Header Cell)

Grid Header Cell은 override/instance를 Items 통한 다양한 레이아웃 조합과 및 Feature Right overrides/instances를 Feature Left 통한 다양한 기능 구성을 지원합니다. 또한 셀을 시각적으로 변경하지 않지만 편집, 이동, 크기 조정, 숨기기 및 고정과 같은 그리드에서 다른 열 기능을 활성화하는 여러 추가 재정의/인스턴스가 있습니다. 일부 기능은 더 이상 사용되지 않으므로 Figma 에서는 and Feature Right만 지원합니다 Feature Left.

State and Grid Feature (Body Cell)

그리드 바디 셀(Grid Body Cell)은 다음과 같은 대화형 상태를 지원합니다: 기본 상태인 비활성(Inactive), 선택됨(Selected), 활성(Active) 및 초점(Focused). 전체 그리드에서 하나의 셀만 주어진 순간에 활성화되거나 집중될 수 있습니다.

Grid Body Cell은 헤더 Grid Feature에 정의된 일부 Grid 기능에 대한 스타일 지원을 제공합니다. 일반 셀, 편집 가능한 셀 및 선택한 행에 속하는 셀에 대한 스타일 변형이 있습니다. Figma에서 서로 다른 body cell 상태 간의 전환은 properties 패널의 및 속성을 통해 Cell State Row Selected Row Editing 이루어집니다. Sketch Grid Feature 에서는 사용 가능한 Symbol Overrides 항목을 사용해야 하며 Adobe XD에는 일치하는 목록이 Component States 있습니다.

Cell Type

Sketch 및 Figma에서 그리드 헤더 셀은 그리드가 수용해야 하는 데이터 유형에 대한 5가지 사전 설정을 제공합니다. 숫자 값의 숫자, 각 데이터 유형에 대한 텍스트, 날짜, 부울을 결합하는 것, 여러 행을 선택하려는 경우 첫 번째 열에 사용되는 행 선택, Group By- 그룹화된 데이터 행을 확장 및 축소하는 데 사용되며, 사용자가 본문 셀 내의 콘텐츠와 관련된 특정 필터링 옵션을 활성화할 수 있는 행 필터입니다. Figma 에는 행 필터에 대한 두 가지 옵션(비어 있음 또는 채워짐)이 있습니다. Adobe XD에서 유형은 데이터, 행 선택 및 그룹화 기준에 대한 표준 유형과 숫자 값과 텍스트, 날짜, 부울 중에서 Component States 선택할 수 있는 표준 유형의 세 가지입니다.

그리드 본문 셀은 빈 본문 셀을 표시하는 데 사용되는 간단한 그래픽 및 스페이서 유형을 시각화하기 위한 추가 아이콘 유형과 함께 헤더 셀과 같은 동일한 일반 유형의 데이터에 대한 사전 설정을 제공합니다.

Grid Horizontal Scrolling

Figma에서 가로 스크롤을 얻으려면 실제 그리드 너비보다 작은 크기의 프레임 내부에 그리드를 추가하고 속성 패널에서 클리핑 옵션을 활성화해야 합니다. 그런 다음 속성 패널 상단의 Prototype 탭으로 이동하여 스크롤을 가로로 설정해야 합니다. 동일한 결과를 얻기 위한 또 다른 옵션은 그리드 구성 요소를 분리하는 것입니다. 그런 다음 프레임 크기를 줄인 다음 속성 패널에서 클리핑 옵션을 활성화해야 합니다. Sketch 및 Adobe XD에서 절대 너비로 또는 상위 그룹/컨테이너를 기준으로 특정 그리드 치수를 얻는 한 가지 방법은 그리드의 기본 그룹 내에 마스크를 추가하는 것입니다. 스타일 없이 사각형을 삽입하고 필요에 따라 크기를 설정하기만 하면 아래 이미지에는 항상 정확히 800px 너비의 그리드가 있습니다.

직사각형의 너비와 높이를 수정하고 이름을 Mask로 변경한 후 레이어 패널 하단에 배치할 수 있습니다. 그런 다음 상단을 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴 하단 근처에 있는 Mask 옵션을 선택합니다.

이제 그리드 그룹은 마스크의 크기를 사용하며 가로 스크롤 없이 그리드를 사용하는 것과 같은 방식으로 레이아웃에서 이를 사용할 수 있습니다. 이 구성 요소에 대한 코드가 생성되면 마스크 크기를 고려하여 그리드에 사용하는 수평 스크롤 막대가 자동으로 추가됩니다.

스타일링

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

Usage

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

하다	하지 않다

그리드