El widget Cuadrícula es un contenedor de diseño que puede utilizar para organizar el contenido en forma de cuadrícula. Los widgets Cuadrícula pueden contener varios widgets.
Ejemplos
Use este widget para apoyar los requisitos de diseño de la aplicación como por ejemplo los siguientes:
- Desea que los elementos de la página, como el contenido multimedia integrado, se organicen en una cuadrícula.
- Desea que los usuarios puedan expandir imágenes individuales de una cuadrícula para que ocupen toda la página.
Notas de uso
Al agregar un widget Cuadrícula, aparecen los botones Agregar widget y Elegir una plantilla de cuadrícula. La ventana del último botón aparece automáticamente. Puede elegir una plantilla de cuadrícula y, a continuación, agregar widgets a cada elemento de la cuadrícula. Para agregar widgets sin una plantilla, haga clic en el botón Agregar widget y seleccione de la galería de widgets, o arrastre widgets desde el panel Insertar widget.
Cuando arrastra un nuevo widget a la cuadrícula, el diseño cambia automáticamente en función de dónde coloque el widget. Si lo coloca en el centro de un elemento que ya contiene un widget, se agrega en una nueva pestaña.
Si coloca un nuevo widget en cualquier otro lugar sobre un elemento de cuadrícula existente, se agrega como un nuevo elemento y ambos elementos dividen el espacio que ocupa el elemento original, creando una columna de cuadrícula o una fila de cuadrícula. Puede pasar el puntero por los huecos entre los elementos para arrastrar y cambiar el tamaño de sus límites. También puede hacer clic en un elemento y utilizar los botones Dividir horizontalmente o Dividir verticalmente en la barra de herramientas del elemento para dividir un elemento del mismo modo.
Cuando arrastra un nuevo widget sobre un widget Cuadrícula que ya contiene varios elementos de cuadrícula, puede colocar el widget en relación con toda la cuadrícula. Aparecen barras de guía; puede usarlas para colocar un widget en la parte superior, inferior, izquierda y derecha de toda la cuadrícula.
Algunos widgets, como los widgets Tarjeta y Mapa, le permiten anidar otros widgets dentro de ellos. Cuando agrega un widget de este tipo, este introduce un estado bloqueado de forma predeterminada. Puede hacer clic en el botón de candado para desbloquear el widget y reorganizar los widgets internos. En el estado bloqueado, solo puede cambiar los ajustes propios del widget. Por ejemplo, si incluye un widget Mapa que contiene un widget Dibujar en una cuadrícula, debe desbloquear el widget Mapa para mover el widget Dibujar.
El Contorno del panel Página muestra la jerarquía de widgets, pestañas, columnas de cuadrícula y filas de cuadrícula contenidas en un widget Cuadrícula. Al igual que cualquier widget, puede seleccionar cualquier fila o columna de cuadrícula en el esquema y hacer clic en el botón Más para acceder a un menú de operaciones. Las filas y columnas de la cuadrícula tienen los botones Distribuir espacio horizontalmente y Distribuir espacio verticalmente, respectivamente. Si una fila o columna forma una pestaña, puede cambiar el nombre de la fila o columna. Los widgets individuales contenidos en un widget Cuadrícula tienen los botones Dividir horizontalmente y Dividir verticalmente en el menú Más.
Cuando incluye el widget Cuadrícula en una aplicación, el widget puede proporcionar a los usuarios las siguientes opciones de interacción (debe habilitar estas opciones en la configuración del widget):
- Haga clic para expandir elementos individuales de la cuadrícula. El botón de expansión
aparece cuando el usuario pasa el puntero sobre un elemento. - Arrastre los huecos que separan cada elemento de la cuadrícula para cambiar el tamaño de los elementos de la cuadrícula.
Nota:
En diseños de pantalla pequeños, todos los widgets de una cuadrícula se convierten automáticamente en pestañas de cuadrícula. Sin embargo, puede crear un diseño personalizado para optimizar una cuadrícula para distintos tamaños de pantalla.Configuración
El widget Cuadrícula incluye los siguientes ajustes:
- Diseño: configure los ajustes de diseño.
- Relleno: cambie el tamaño de los huecos de relleno alrededor del borde interior del widget, ya sea todos a la vez o por separado. Puede especificar los valores de tamaño en píxeles (px) o porcentaje (%).
- Color de relleno: cambie el color de los huecos de relleno alrededor del borde interno del widget.
- Hueco: cambie el color y el ancho de los espacios entre los elementos de la cuadrícula. Puede especificar el valor del ancho en píxeles (px).
- Elementos de cuadrícula: defina el modo en que los usuarios pueden interactuar con los elementos de la cuadrícula en tiempo de ejecución.
- Permitir cambiar tamaño: permita a los usuarios arrastrar los huecos para cambiar el tamaño de los elementos de la cuadrícula.
- Permitir expansión: permita a los usuarios expandir elementos individuales de la cuadrícula.