Red

Utilice el componente de cuadrícula para permitir que el usuario examine e interactúe con una gran cantidad de datos complejos que se representan visualmente en un diseño tabular y proporcionar medios para filtrar, ordenar, paginar y mucho más. La cuadrícula es visualmente idéntica al componente de cuadrícula Ignite UI for Angular

Grid Demo

Using the Grid in Figma

La cuadrícula es esencialmente un repetidor de columnas y filas, que muestra datos en un diseño tabular. Por lo tanto, la forma más fácil de usarlo es arrastrando una de las cuadrículas predefinidas a su marco: hay tres ajustes preestablecidos disponibles para los tres tamaños compatibles. Tenga en cuenta que, en Figma el componente de cuadrícula tiene una estructura basada en columnas, lo que significa que puede eliminar u ocultar instantáneamente una columna completa, pero no una fila completa. Una vez que inserte la cuadrícula, puede comenzar a editar el encabezado y las celdas del cuerpo o cambiar el tamaño del ancho total de la cuadrícula. Sin embargo, en caso de que desee realizar más ajustes en la estructura de la cuadrícula, como eliminar columnas o filas, o cambiar el ancho de las columnas, debe hacer clic con el botón derecho en la cuadrícula y usar la Detach instance opción cerca de la parte inferior del menú contextual. En el panel de capas verás la siguiente estructura debajo del nombre del componente, sin necesidad de desvincularlo previamente:

Capa	Usar
🚫 versión del componente	Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y contiene información sobre la versión del componente. Debes evitar eliminarlo o modificarlo.
🚫 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.
Columna (número)	Contiene las celdas Encabezado y Cuerpo dentro de la columna específica
Encabezamiento	Contiene una celda de encabezado específica
Cuerpo (número)	Contiene una célula corporal específica.

Después de separar, puede aumentar la cantidad de columnas dentro de la cuadrícula duplicando cualquiera de las columnas existentes. Para aumentar la cantidad de células del cuerpo, primero debe usar la opción Detach instance en la columna específica y luego duplicar cualquiera de las células del cuerpo que ya existen dentro de la columna. Después de aumentar o disminuir el número de columnas o celdas, debe ajustar manualmente el tamaño del componente Cuadrícula.

Using the Grid in Sketch

Para utilizar el componente Cuadrícula en Sketch puede insertar una de las cuadrículas predefinidas en la mesa de trabajo: hay tres ajustes preestablecidos disponibles para las tres densidades de visualización admitidas. Una vez en tu mesa de trabajo, al hacer clic con el botón derecho del ratón en la parte superior y seleccionar la Detach from Symbol opción cerca de la parte inferior del menú contextual, deberías ver lo siguiente en tu panel de capas bajo el 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.
Columna (número)	Contiene las celdas Encabezado y Cuerpo dentro de la columna específica
Encabezamiento	Contiene todas las celdas del encabezado.
Cuerpo (número)	Contiene una célula corporal específica.

Después de separar, puede modificar la cantidad de encabezados que necesita para mostrar todas las dimensiones de sus datos e insertar tantos registros visibles como desee mostrar en su diseño simplemente duplicando una de las filas de datos que ya tener.

Using the Grid in Adobe XD

En Adobe XD, después de elegir uno de los tres componentes de cuadrícula de densidad de visualización preestablecidos y arrastrarlo a la mesa de trabajo, observará que en el panel de capas que usamos Repeat Grid tanto para el encabezado como para el cuerpo se acelera 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.
Encabezamiento	Contiene todas las celdas de encabezado agrupadas en una cuadrícula de repetición de encabezado
Cuerpo	Contiene todas las células del cuerpo agrupadas en una cuadrícula de repetición corporal.

Cuando selecciona la capa Encabezado o Cuerpo Repetir cuadrícula, puede modificar el número de celdas repetidas que necesita arrastrando los controles verdes en el borde derecho o inferior para mostrar todas las dimensiones de sus datos e insertar tantos registros visibles como desee. para 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 las celdas por separado para lograr el diseño deseado.

Cell Types

The Grid proporciona tres tipos de celdas, que sirven para diferentes propósitos de visualización de datos. La celda de encabezado es solo una por columna y aparece en la parte superior de la cuadrícula para mostrar la descripción textual de los datos en esa columna en particular. El Body Cell se utiliza para construir la tabla de contenido, mostrando registros de datos y su tipo puede variar. La celda de resumen se utiliza para crear una sección en la parte inferior de la cuadrícula, donde se muestran las columnas de resúmenes para cada dimensión, como el recuento, el valor mínimo y máximo.

También hay un subtipo especial de celda de encabezado, la celda de encabezado de filtro de fila, que se utiliza para crear una fila de encabezado adicional en la parte inferior del encabezado para habilitar la funcionalidad de filtrado de filas.

Cell Size

Las celdas de encabezado, cuerpo y resumen admiten tres variantes para los tamaños correspondientes del componente de cuadrícula: grande, mediano y pequeño. En Sketch, cada uno de ellos viene con símbolos distintos, mientras que en Figma, el tamaño de las celdas y el contenido dentro son propiedades que se pueden cambiar por separado desde el panel de propiedades:

Note

Le recomendamos que no cambie el tamaño de las celdas de la cuadrícula, una vez que haya seleccionado un componente de cuadrícula con un tamaño determinado.

Items and Features (Header Cell)

La celda de encabezado de cuadrícula admite varias combinaciones de diseño a través de la Items anulación/instancia y diferentes configuraciones de características a través de las Feature Left anulaciones/instancias y Feature Right. Además, hay una serie de anulaciones/instancias adicionales que no alteran visualmente las celdas, pero habilitan diferentes características de columna en la cuadrícula, como Editar, Mover, Cambiar tamaño, Ocultar y Anclar. Dado que estamos dejando de usar algunas de las características, en Figma solo admitimos Feature Left y Feature Right.

State and Grid Feature (Body Cell)

La celda del cuerpo de la cuadrícula admite los siguientes estados interactivos: Inactivo como estado predeterminado, Seleccionado, Activo y Enfocado. Solo una celda en toda la cuadrícula puede estar activa o enfocada en un momento dado.

La celda del cuerpo de la cuadrícula tiene soporte de estilo para algunas de las características de la cuadrícula definidas en los encabezados a través de su Grid Feature. Hay variantes de estilo para celdas regulares, celdas editables y celdas que pertenecen a una fila seleccionada. En Figma el cambio entre los diferentes estados de las células del cuerpo se logra a través de las Cell State propiedades y Row Selected Row Editing en el panel de propiedades. En Sketch, para cambiar entre Grid Feature-s debe usar el disponible Symbol Overrides, mientras que en Adobe XD hay una lista coincidente de Component States.

Cell Type

En Sketch y en Figma, la celda de encabezado de cuadrícula proporciona cinco ajustes preestablecidos para los tipos de datos que la cuadrícula debe acomodar: Número para valores numéricos, el que combina Texto, Fecha, Bool para los tipos de datos respectivos, Selección de fila que se usa para la primera columna cuando se desea la selección de varias filas, Agrupar por: se utiliza para expandir y contraer filas de datos agrupadas, y Filtro de fila que se utiliza donde el usuario puede activar opciones de filtrado específicas, relacionadas con el contenido dentro de las celdas del cuerpo. En Figma hay dos opciones para Filtro de fila: Vacío o Lleno. En Adobe XD, los tipos son tres: uno estándar para Datos, Selección de filas y Agrupar por, y el estándar admite la elección entre valores numéricos y Texto, Fecha y Bool vía Component States.

La celda del cuerpo de la cuadrícula proporciona ajustes preestablecidos para los mismos tipos genéricos de datos como la celda del encabezado con un tipo de icono adicional para visualizar gráficos simples y un tipo de espaciador, que se utiliza para mostrar una celda del cuerpo vacía.

Grid Horizontal Scrolling

Para lograr el desplazamiento horizontal en Figma, debe agregar la cuadrícula dentro de un marco con un tamaño menor que el ancho real de la cuadrícula y activar la opción de recorte desde el panel de propiedades. Luego, debe ir a la Prototype pestaña en la parte superior del panel de propiedades y establecer el desplazamiento en horizontal. Otra opción para lograr el mismo resultado es separar el componente de cuadrícula. A continuación, tendrás que reducir el tamaño del fotograma y luego activar la opción de recorte desde el panel de propiedades. En Sketch y Adobe XD, una forma de lograr ciertas dimensiones de cuadrícula, ya sea como un ancho absoluto o en relación con un grupo o contenedor principal, es agregar una máscara dentro del grupo principal para la cuadrícula. Simplemente inserte un rectángulo sin ningún estilo y establezca sus dimensiones de acuerdo con sus necesidades, en la imagen de abajo tenemos una cuadrícula que siempre tiene exactamente 800px de ancho.

Puede corregir el ancho y el alto del rectángulo, cambiar su nombre a Mask y colocarlo en la parte inferior del panel de capas. Luego haga clic derecho encima y seleccione la opción Mask cerca de la parte inferior del menú contextual.

Ahora su grupo de Cuadrícula tomará las dimensiones de la Máscara y podrá usarla en su diseño de la misma manera que usaría una Cuadrícula sin desplazamiento horizontal. Cuando se genera el código para este componente, se agregará automáticamente una barra de desplazamiento horizontal que respetará las dimensiones de la máscara y las utilizará para su cuadrícula.

Estilismo

Grid viene con flexibilidad de estilo que se puede lograr aplicando estilos al texto de las celdas individuales, los íconos y los colores de fondo en los distintos estados disponibles, así como también ocultando los bordes horizontales y verticales.

Usage

Lo más importante de la cuadrícula 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.