스켈레톤 트리 그리드

스켈레톤 트리 그리드를 사용하면 표준 정보와 동일한 유형의 정보를 레이아웃할 수 있을 뿐만 아니라 현재 데이터가 없을 때(예: 원격 데이터 소스에서 데이터가 로드되거나 부족할 때) 애플리케이션 상태를 나타낼 수도 있습니다. 연결이 끊어지거나 시간이 좀 걸립니다. 스켈레톤 트리 그리드는 알려진 레이아웃이 있는 트리 그리드의 시각적 표현일 뿐이지만 표시할 데이터는 없습니다.

Skeleton Tree Grid Demo

Cell Types

스켈레톤 트리 그리드는 세 가지 유형의 스켈레톤 셀인 헤더, 본문, 요약을 표준 트리 그리드: TreeColumn 셀과 같은 추가 유형으로 확장합니다.

Cell Display Density

Skeleton Tree Grid TreeColumn 셀은 표준 트리 그리드와 동일한 세 가지 디스플레이 밀도 변형(편안함, 아늑함, 컴팩트)을 지원합니다.

Cell Depth

Skeleton Tree Grid TreeColumn 셀은 표준 트리 그리드 (루트 수준, 하위 수준 또는 손자 수준)와 마찬가지로 데이터 계층 구조 수준에 대한 동일한 시각적 표시를 지원합니다. 열 1에서 셀을 선택한 후 Figma에서 둘 사이를 전환하려면 레이어 패널의 레벨 기본 구성 요소로 이동하여 Level 속성을 사용하세요. Sketch 에서는 Symbol Overrides 사용하여 이들 사이를 전환할 수 있지만 Adobe XD에서는 Component States 패러다임을 사용합니다.

Grid Types

스켈레톤 트리 그리드는 세 가지 디스플레이 밀도를 지원하고 데이터 로드 상태와 관련하여 각 밀도에 대한 변형을 제공합니다. 트리 그리드가 데이터를 로드하고 확장된 루트 수준 행이 없을 때 표시되는 초기와 표시되는 확장 루트 레벨이 확장되어 해당 하위 레벨에 대한 데이터 로드를 시작할 때.

Usage

트리 그리드를 생성할 때 동일한 계층 수준 내에서 표준 셀과 뼈대 셀을 결합하지 마십시오. 데이터는 지정된 수준의 모든 행과 셀에 대해 존재하거나 전혀 존재하지 않습니다. 표준 셀과 스켈레톤 셀을 결합하는 것은 위에서 설명한 사전 설정과 같이 매우 제한된 사용 사례에만 적합합니다.

하다	하지 않다