Edición de cuadrícula

Utilice la edición de cuadrícula para permitir al usuario actualizar ciertos valores, ya sea celda por celda o una fila a la vez. Tanto la edición de celdas como de filas son visualmente idénticas a la Ignite UI for Angular

Cell Editing

La edición de celda de cuadrícula ocurre celda por celda y se configura a través de la celda del cuerpo que se desea mostrar en modo de edición a través de la anulación de la Grid Feature en Sketch, o la propiedad del componente Grid Feature en el panel de propiedades en Figma. En Adobe XD, la capa Grid Feature utiliza el paradigma Component States para proporcionar un mecanismo similar. Una vez que configure la Grid Feature en Cell Feature/Cell Editing, tendrá una Cuadrícula editable que respeta este modo.

Row Editing

La edición de filas de cuadrícula ocurre una fila a la vez y se configura a través de las celdas del cuerpo que pertenecen a la fila editada configurando su Grid Feature en Cell Feature/Row Editing. En Sketch, introducimos un segundo Editing State de anulación que le permite especificar la celda enfocada configurándola como Focus Cell; tenga en cuenta que debe configurar todas las demás celdas en esta fila como Rest Cell. En Adobe XD, ambos elementos anteriores están disponibles como Component States en la capa Grid Feature. En Figma para indicar que una fila está en estado de edición, debe cambiar la propiedad Variant de todas las celdas de esa fila. Puede hacer esto seleccionando la capa Grid Feature en el panel de capas debajo de cada celda del cuerpo y cambiando la variante a Row Editing Rest. Cambie la variante a Row Editing Focused para la celda que desea presentar como enfocada.

La cuadrícula tiene un símbolo Editing Row Banner debajo Features que representa un área de resumen con la cantidad de ediciones realizadas en la fila y un par de acciones para cancelar y confirmar las ediciones realizadas en la fila. Agregar este símbolo/componente solo tiene un efecto visual en su diseño para hacerlo más realista; si desea cambiar la función de edición de filas, configure las celdas de la fila en consecuencia.

Additional Resources

Tema relacionado:

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