Skeleton Grid (スケレトン グリッド)
Skeleton Grid を使用して、標準の情報と同じタイプの情報をレイアウトしますが、現時点でデータが存在しない場合のアプリケーションの状態も示します。たとえば、データがリモート データ ソースから読み込まれる際、接続が不足しているか、時間がかかる場合などです。Skeleton Grid は、既知のレイアウトの Grid を視覚的に表したものですが、表示するデータはありません。
Grid のデモ
![](../images/grid_skeleton_demo.png)
セル タイプ
Skeleton Grid は、標準 Grid と同じ 3 種類のセル (header、body、summary) をサポートします。
![](../images/grid_skeleton_cell_header.png)
![](../images/grid_skeleton_cell_body.png)
![](../images/grid_skeleton_cell_summary.png)
セル表示密度
Skeleton の Header、Body、および Summary Cell は、標準 Grid と同じ 3 つの表示密度バリアント (Comfortable、Cosy、Compact) をサポートします。
![](../images/grid_skeleton_cell_header_comfortable.png)
![](../images/grid_skeleton_cell_header_cosy.png)
![](../images/grid_skeleton_cell_header_compact.png)
項目と機能 (ヘッダー セル)
Skeleton Grid は、標準 Grid と同じ機能構成を、Feature Left
および Feature Right
のオーバーライドを介してサポートします。
![](../images/grid_skeleton_cell_header_no-icon.png)
![](../images/grid_skeleton_cell_header_icon.png)
![](../images/grid_skeleton_cell_header_icons.png)
セル タイプ
Skeleton Grid Header Cell は、標準 Grid として、Number および Text、Date、Bool 型のデータのプリセットを提供します。
![](../images/grid_skeleton_cell_header_number.png)
![](../images/grid_skeleton_cell_header_text.png)
Skeleton Grid Body Cell は、Skeleton Grid Header Cell と同じデータ型のプリセットを提供し、単純なグラフィックスを視覚化する追加のアイコン タイプを含みます。
![](../images/grid_skeleton_cell_body_number.png)
![](../images/grid_skeleton_cell_body_text.png)
![](../images/grid_skeleton_cell_body_icon.png)
使用方法
グリッドを作成するときは、標準セルとスケルトン セルを組み合わせないでください。データはすべてのセルに存在するか、いずれにも存在しないため、2 つのタイプを同じグリッド レイアウト内で使用しないでください。
良い例 | 悪い例 |
---|---|
![]() |
![]() |
その他のリソース
関連トピック:
コミュニティに参加して新しいアイデアをご提案ください。