Cuadrícula jerárquica

    Utilice el componente de cuadrícula jerárquica para permitir al usuario explorar e interactuar con una gran cantidad de datos complejos organizados en tablas separadas relacionadas jerárquicamente entre sí. Cada cuadrícula de la jerarquía representa sus propios datos en forma de tabla y proporciona las mismas características que la cuadrícula. La cuadrícula jerárquica es visualmente idéntica a la Ignite UI for Angular

    Hierarchical Grid Demo

    Using the Hierarchical Grid in Figma

    De manera similar a la cuadrícula, la cuadrícula jerárquica es esencialmente un repetidor de columnas, filas y cuadrículas anidadas que forman una jerarquía visual. Para utilizar el componente Cuadrícula jerárquica, simplemente búsquelo en el panel Recursos e inserte una instancia. Si es necesario, puede cambiar la densidad de visualización utilizando la propiedad "Densidad de visualización" del panel de propiedades. En el panel de capas verás la siguiente estructura:

    Capa Usar
    🚫 versión del componente Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa contiene información sobre la versión actual del componente y debe evitar eliminarla o modificarla.
    🚫 metadatos Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y debes evitar eliminarla o modificarla.
    Indicación de taladro Un símbolo que se utiliza para indicar la celda activa/celda enfocada.
    Cuadrícula 2 Contiene todas las columnas y celdas del encabezado de la cuadrícula inferior.
    Fondo Define el color de fondo de la segunda cuadrícula.
    Cuadrícula 1 Contiene todas las columnas y celdas de la cuadrícula superior.

    Si desea modificar la cantidad de columnas o celdas, simplemente puede ocultar las innecesarias del panel de capas. En caso de que desee agregar más, deberá seleccionar el componente Cuadrícula jerárquica, hacer clic derecho sobre él y seleccionar "Separar instancia" en el menú contextual. Luego puede duplicar algunas de las columnas existentes hasta lograr el aspecto deseado de la cuadrícula. Si desea mostrar más jerarquía, también puede duplicar uno de los dos marcos de cuadrícula.

    Using the Hierarchical Grid in Sketch

    La forma más sencilla de utilizar la cuadrícula jerárquica en Sketch es arrastrando una de las cuadrículas predefinidas a su mesa de trabajo; hay tres ajustes preestablecidos disponibles para las tres densidades de visualización admitidas. Una vez en su mesa de trabajo, al hacer clic derecho en la parte superior y seleccionar la opción Detach from Symbol cerca de la parte inferior del menú contextual, debería ver lo siguiente en su panel de capas debajo del grupo recién aparecido:

    Capa Usar
    🚫 metadatos Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y debes evitar eliminarla o modificarla.
    🌈 Indicación de taladro Un símbolo que se utiliza para indicar la celda activa/celda enfocada.
    Encabezamiento Contiene todas las celdas del encabezado.
    Cuerpo Contiene todas las células del cuerpo y una cuadrícula anidada con estructura básica.
    🌈 Fondo Define el color de fondo de la Cuadrícula Jerárquica.

    Después de separar, puede modificar la cantidad de encabezados que necesita para mostrar todas las dimensiones de sus datos y tantos registros como desee mostrar en su diseño simplemente duplicando la primera fila de datos que ya ha creado dentro de cada una de las cuadrículas. que tienes. En caso de que necesite mostrar más jerarquía, también puede anidar cuadrículas adicionales dentro del cuerpo de la jerarquía principal a la que pertenecen.

    Using the Hierarchical Grid in Adobe XD

    En Adobe XD, después de elegir uno de los tres componentes de cuadrícula jerárquica de densidad de visualización preestablecidos y arrastrarlo a su mesa de trabajo, notará en el panel de capas que usamos Repeat Grid tanto para el encabezado como para el cuerpo para acelerar la configuración. A diferencia de Sketch en Adobe XD no es necesario destruir el símbolo. Deberías ver lo siguiente en tu panel de capas:

    Capa Usar
    🚫 metadatos Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y debes evitar eliminarla o modificarla.
    🌈 Indicación de taladro Un símbolo que se utiliza para indicar la celda activa y rastrear su pertenencia a través de la jerarquía de cuadrículas.
    Encabezamiento Contiene todas las celdas del encabezado: la celda CollapseAll y el resto agrupadas en un encabezado de cuadrícula repetida
    Cuerpo Contiene todas las celdas del cuerpo: las celdas Expandir agrupadas en una Cuadrícula de repetición y el resto agrupadas en otra Cuadrícula de repetición, y una Cuadrícula anidada con una estructura básica.
    🌈 Fondo Define el color de fondo de la cuadrícula anidada.

    Cuando selecciona una capa Repetir cuadrícula, puede modificar el número de celdas repetidas que necesita, lo que se puede hacer dentro de cada cuadrícula. Simplemente arrastre los controles verdes en el borde derecho o inferior para mostrar todas las dimensiones de sus datos e inserte tantos registros visibles como desee mostrar en su diseño. Para cambiar un tipo de celda o ancho de columna en particular, debe seleccionar la capa Repetir cuadrícula y hacer clic en Ungroup Grid en el panel derecho. Esto le permitirá trabajar en ellos por separado para lograr el diseño deseado. Si necesita mostrar más jerarquía, también puede duplicar cuadrículas completas y anidarlas dentro del cuerpo de la principal a la que desea que pertenezcan.

    Cell Types

    La cuadrícula jerárquica amplía los tres tipos de celdas de cuadrícula normales: encabezado, cuerpo y resumen con dos adicionales que se utilizan para organizar la jerarquía. La celda CollapseAll siempre se usa como la primera celda de encabezado y viene con un ícono predefinido y una acción para contraer/expandir todos los registros pertenecientes a la cuadrícula en cuyo encabezado aparece. La celda Expandir siempre se usa como la primera celda del cuerpo en cada fila y viene con un ícono predefinido y una acción para contraer/expandir la fila.

    Para comprender cómo se pueden usar las celdas regulares de encabezado, cuerpo y resumen para diferentes tipos de datos y configurarlas para habilitar las diversas funciones de cuadrícula jerárquica, consulte el tema general de cuadrícula.

    Cell Display Density

    Las celdas Contraer todo y Expandir admiten tres variantes de densidad de visualización de la cuadrícula jerárquica: cómoda, acogedora y compacta. Cada uno de ellos viene con símbolos distintos, como se puede ver en las celdas del encabezado Contraer todo a continuación:

    Estilismo

    La cuadrícula jerárquica ofrece flexibilidad de estilo que se puede lograr aplicando estilos al texto de las celdas individuales, los iconos y los colores de fondo en los distintos estados disponibles, así como ocultando los bordes horizontales y verticales. También es posible aplicar estilo a la indicación de perforación y al fondo de la cuadrícula.

    Usage

    De manera similar a la Cuadrícula, lo más importante de la Cuadrícula Jerárquica es la alineación de los datos dentro de sus Celdas de Encabezado y Cuerpo. El texto siempre debe estar alineado a la izquierda, dejando un espacio vacío variable a la derecha, y los números siempre deben estar alineados a la derecha, dejando un espacio vacío variable a la izquierda.

    Hacer No

    Additional Resources

    Temas relacionados:

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