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.
Editing Row Banner
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.