Cuadrícula de árbol esqueleto

    Utilice la cuadrícula de árbol esqueleto para diseñar el mismo tipo de información que usaría en la cuadrícula estándar, pero también para indicar el estado de la aplicación cuando no hay datos presentes en ese momento, por ejemplo, cuando los datos se cargan desde una fuente de datos remota y faltan datos. de conectividad, o lleva algún tiempo. El Skeleton Tree Grid es solo una representación visual de un Tree Grid con un diseño conocido, pero sin ningún dato que mostrar.

    Skeleton Tree Grid Demo

    Cell Types

    Skeleton Tree Grid amplía los tres tipos de celdas de esqueleto: Encabezado, Cuerpo y Resumen con uno adicional como la celda Tree Grid estándar: TreeColumn.

    Cell Display Density

    La celda Skeleton Tree Grid TreeColumn admite las mismas tres variantes de densidad de visualización que la Tree Grid estándar: Cómodo, Acogedor y Compacto.

    Cell Depth

    La celda TreeColumn de Skeleton Tree Grid admite la misma indicación visual para el nivel de la jerarquía de datos que la Tree Grid estándar: nivel raíz, nivel secundario o nivel nieto. Para cambiar entre ellos en Figma una vez que seleccione una Celda de la Columna 1, vaya al componente base Nivel dentro de ella en el panel de capas y use la propiedad Level. En Sketch, se puede cambiar entre ellos con Symbol Overrides, mientras que en Adobe XD usamos el paradigma Component States.

    Grid Types

    Skeleton Tree Grid admite las tres densidades de visualización y ofrece variantes para cada una de ellas con respecto al estado de carga de datos: Inicial, que se muestra cuando Tree Grid está cargando datos y no hay filas de nivel raíz expandidas, y Expand, que se muestra cuando un nivel raíz se expande y comienza a cargar datos para sus hijos.

    Usage

    Al crear Tree Grid, evite combinar celdas estándar y esqueléticas dentro del mismo nivel jerárquico. Los datos están presentes en todas las filas y celdas de un nivel determinado o en ninguna de ellas. La combinación de celdas estándar y esqueléticas solo es apropiada en un conjunto muy limitado de casos de uso, como los ajustes preestablecidos explicados anteriormente.

    Hacer No

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.