그리드

그리드 구성 요소를 사용하면 사용자가 표 형식 레이아웃으로 시각적으로 표현되는 방대한 양의 복잡한 데이터를 찾아보고 상호 작용할 수 있으며 필터링, 정렬, 페이징 등을 위한 수단을 제공할 수 있습니다. 그리드는 Ignite UI for Angular와 시각적으로 동일합니다.

Grid Demo

Using the Grid in Figma

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

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

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

Using the Grid in Sketch

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

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

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

Using the Grid in Adobe XD

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

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

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

Cell Types

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

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

Cell Display Density

머리글, 본문 및 요약 셀은 그리드 구성 요소의 표시 밀도에 따라 세 가지 표시 밀도 변형(편안함, 아늑함, 컴팩트)을 지원합니다. Sketch 에서는 각 셀에 고유한 기호가 표시되는 반면, Figma 에서는 셀의 밀도와 내부 콘텐츠가 속성 패널에서 별도로 변경할 수 있는 속성입니다.

Note

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

Items and Features (Header Cell)

그리드 헤더 셀은 Items 재정의/인스턴스를 통해 다양한 레이아웃 조합을 지원하고 Feature Left 및 Feature Right 재정의/인스턴스를 통해 다양한 기능 구성을 지원합니다. 또한 셀을 시각적으로 변경하지 않지만 편집, 이동, 크기 조정, 숨기기 및 고정과 같은 그리드의 다양한 열 기능을 활성화하는 추가 재정의/인스턴스가 많이 있습니다.

State and Grid Feature (Body Cell)

그리드 바디 셀은 다음과 같은 대화형 상태를 지원합니다. 일반 상태의 경우 비활성 상태 이고 포커스/선택된 셀의 경우 활성 상태입니다. 주어진 순간에 전체 그리드에서 단 하나의 셀만 활성화될 수 있습니다.

Grid Body Cell은 Grid Feature를 통해 헤더에 정의된 일부 Grid 기능에 대한 스타일 지원을 제공합니다. 일반 셀, 편집 가능한 셀, 선택한 행에 속하는 셀에 대한 스타일 변형이 있습니다. Figma 에서는 속성 패널의 "상태" 속성을 통해 다양한 본체 셀 상태 간 전환이 이루어집니다. Sketch에서 Grid Feature 사이를 전환하려면 사용 가능한 Symbol Overrides 사용해야 하지만 Adobe XD에는 일치하는 Component States 목록이 있습니다.

Cell Type

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

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

Grid Horizontal Scrolling

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

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

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

스타일링

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

Usage

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

하다	하지 않다

그리드