Descripción general de React Tile Manager

El componente Administrador de mosaicos de Ignite UI for React permite la visualización de contenido en mosaicos individuales. Permite a los usuarios interactuar con estos mosaicos reorganizándolos y cambiando su tamaño, dándoles la libertad de personalizar el diseño y la apariencia del contenido según sus preferencias. Esta flexibilidad mejora la experiencia del usuario al permitir una forma más personalizada y eficiente de ver y administrar el contenido.

React Tile Manager Example

El siguiente ejemplo de administrador de mosaicos de Ignite UI for React muestra el componente en acción.

[!Warning] Due to the iframe permissions policy, the fullscreen button in this example will only work when the example is opened in standalone mode by clicking the 'Expand to fullscreen' button in the top-right corner.

Usage

ProporcionaIgrTileManager un comportamiento de disposición de las losetas base, gestionando la colocación de las losetas en estado máximo o normal. Las fichas pueden dimensionarse de forma independiente unas de otras y usarse para formar diseños complejos. Los usuarios finales pueden reordenar las casillas arrastrándolas y soltándolos, proporcionando una experiencia flexible e intuitiva.

El Tile Manager ofrece dos componentes que podemos utilizar:

IgrTile- Este componente representa una casilla individual mostrada dentro del Administrador de Tiles.
IgrTileManager- Este es el componente principal que contiene todos los componentes de las losetas, sirviendo como contenedor para toda la disposición de las losetas.

Empezando

Para comenzar a usar el Administrador de mosaicos, primero debe instalar el Ignite UI for React ejecutando el siguiente comando:

npm install igniteui-react

Antes de usar el Administrador de mosaicos, debe importarlo de la siguiente manera:

import { IgrTile, IgrTileManager } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

Ahora puede comenzar con una configuración básica del React Tile Manager.

  <IgrTileManager>
    <IgrTile>
      <p>Tile 1</p>
    </IgrTile>
    <IgrTile>
      <p>Tile 2</p>
    </IgrTile>
    <IgrTile>
      <p>Tile 3</p>
    </IgrTile>
  </IgrTileManager>

Para una introducción completa al Ignite UI for React, lee el tema Empezar.

Layout

Columns and Rows

Podemos especificar el número de columnas de cuadrícula para nuestro Administrador de Tiles. Para ello, simplemente establece lacolumnCount propiedad en el número deseado de columnas. Si el número es menor que uno o la propiedad no está fija, el Administrador de Mosaicos creará tantas columnas como pueda caber, con cada columna de al menos 200px de ancho y expandiéndose para compartir el espacio disponible por igual. Cuando cambian las dimensiones del visor, las casillas también se reorganizan para maximizar el uso del espacio.

<IgrTileManager columnCount={2}>
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 3 header</span>
    <p>Tile 3 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

En este fragmento de código, los tres mosaicos del Administrador de mosaicos se organizarán en 2 filas y 2 columnas.

Gap

Otra propiedad que puede usarse en el Administrador de Mosaicos es lagap propiedad, que define el espacio entre losetas. El valor de lagap propiedad debe ser un número seguido de una unidad de longitud (por ejemplo, px, rem, em, ...). Este valor se aplicará tanto al espacio horizontal (ancho) como al espacio vertical (altura) entre las fichas.

<IgrTileManager gap="20px">
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

Minimum width and height

También tenemos propiedades para establecer el ancho mínimo de las columnas (minColumnWidth) y la altura mínima de las filas (minRowHeight) en el Administrador de Mosaicos. Similar a la propiedad de hueco, los valores de estas propiedades deben ser un número seguido de una unidad de longitud. Estos valores definirán el ancho mínimo para todas las columnas y la altura mínima para todas las filas en el Administrador de Mosaicos.

<IgrTileManager minColumnWidth="200px" minRowHeight="150px">
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

Example

Tile component

El componente Mosaico tiene propiedades que se pueden establecer individualmente para cada mosaico. Algunas de estas propiedades incluyen:

LacolSpan propiedad especifica cuántas columnas atravesará la loseta en la maquetación, permitiéndote controlar su tamaño horizontal.
LarowSpan propiedad determina cuántas filas se extenderá verticalmente la baldosa, ajustando la altura de la loseta dentro de la disposición.
LacolStart propiedad especifica la columna inicial donde se coloca la ficha.
LarowStart propiedad especifica la fila inicial donde se coloca la ficha.
LadisableFullscreen propiedad oculta el botón de acción predeterminado a pantalla completa.
LadisableMaximize propiedad oculta el botón predeterminado de activar la acción de maximizar.
EstadisableResize propiedad impide que el usuario redimensione la ficha.

<IgrTileManager>
  <IgrTile colSpan={2} disableResize={true}>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
  ...
</IgrTileManager>

El componente Tile también expone varias ranuras que se pueden utilizar:

Nombre de la ranura	Descripción
`title`	Contenido del encabezado del icono.
`fullscreen-action`	Sobrescribe el contenido predeterminado de la acción a pantalla completa.
`maximize-action`	Overwrite the default maximize action content.
`actions`	Contenido personalizado renderizado después de las acciones predeterminadas.
`side-adorner`	Overwrite the default horizontal resize adorner.
`corner-adorner`	Overwrite the default diagonal resize adorner.
`bottom-adorner`	Overwrite the default vertical resize adorner.

Header section actions

De forma predeterminada, la sección de encabezado incluye dos botones de acción:

Elmaximize botón amplía el contenido de la casilla para ocupar todo el ancho del Administrador de Mosaicos, ofreciendo una visión más amplia del contenido.
Elfullscreen botón permite que la tesela se abra en modo pantalla completa en el navegador del usuario.

Si quieres mostrar solo uno de los dos botones, puedes establecer cualquieradisableMaximize de las dosdisableFullscreen propiedades. Para personalizar la apariencia puedes usar lamaximize-action ranura para maximizar ofullscreen-action la ranura para el botón de pantalla completa.

<IgrTileManager>
  <IgrTile disableFullscreen={true}>
    <IgrIconButton slot="maximize-actions" name="north_east" collection="material">
    </IgrIconButton>
    <p>Tile 1 Content</p>
  </IgrTile>
</IgrTileManager>

También tienes la opción de desactivar ambos botones de acción y crear otros personalizados según tus preferencias.

En este ejemplo, hemos creado botones de acción personalizados mediante el componente Botón de icono Ignite UI.

Resizing

El cambio de tamaño en el Administrador de mosaicos es una funcionalidad que permite cambiar el tamaño de los mosaicos mediante tres adornos de cambio de tamaño diferentes.

Adorno lateral: Ajusta la anchura modificando el tramo de la columna.
Adorno inferior: Ajusta la altura modificando el intervalo de la fila.
Adorno de esquina: Ajusta la anchura y la altura simultáneamente.

Para garantizar un cambio de tamaño suave, se utiliza un elemento fantasma en lugar de modificar directamente las dimensiones del mosaico. Este elemento aparece en la parte superior del mosaico original, mostrando sus dimensiones actuales cuando comienza el cambio de tamaño, y se actualiza en tiempo real a medida que el usuario arrastra cualquiera de los controladores de cambio de tamaño.

[!Note] If the ghost element exceeds the available grid space, it will automatically adjust to the largest possible span within the grid's limits.

El Administrador de mosaicos se reorganiza automáticamente cuando un mosaico cambia de tamaño, lo que garantiza que haya un espacio vacío mínimo. Es por eso que la expansión de un mosaico puede empujar a los mosaicos adyacentes a nuevas posiciones, mientras que la contracción crea espacios que otros mosaicos pueden llenar dinámicamente. Esto garantiza que el Administrador de mosaicos permanezca lo más compacto posible, sin mosaicos superpuestos, y que todos los movimientos permanezcan dentro de la estructura de cuadrícula definida.

Podemos usar laresizeMode propiedad para controlar cómo se aplica el redimensionamiento en el Tile Manager. Se puede configurar paranone,hover oalways, que determina cuándo se ven los adornadores de redimensionamiento. El valor por defecto esnone y la casilla no pudo ser redimensionada.

<IgrTileManager resizeMode="hover">
  <IgrTile>
    <p>Tile 1</p>
  </IgrTile>
  <IgrTile>
    <p>Tile 2</p>
  </IgrTile>
</IgrTileManager>

Puede ver la diferencia entre los tres estados en el siguiente ejemplo:

Snapping

Los mosaicos cambian de tamaño en unidades de cuadrícula completas, lo que significa que solo pueden crecer o reducirse en columnas o filas completas. El elemento fantasma se ajusta a la siguiente columna o fila cuando se expande más allá del punto medio y a la anterior cuando se reduce más allá de la marca de la mitad. Esto se aplica a todos los adornos (inferior, lateral y esquina), asegurando que los azulejos siempre permanezcan alineados con la cuadrícula.

También se tienen en cuenta los huecos de la cuadrícula, manteniendo el diseño coherente durante el cambio de tamaño.

Limitations

Existen varias restricciones y limitaciones en el proceso de cambio de tamaño:

Una ficha no puede ser redimensionada más pequeña que su ancho o altura mínima definida (minColumnWidth,minRowHeight).
Un mosaico no puede exceder el espacio horizontal máximo disponible en la cuadrícula.

Reorder

Puedes reordenar las casillas en el Administrador de Mosaicos usando la función de arrastrar y soltar. Por defecto, las casillas no se pueden arrastrar. Para habilitar esta funcionalidad, configura ladragMode propiedad en el Administrador de Tiles en cualquieratile de las dostile-header.

Con latile opción, puedes hacer clic y mantener pulsado en cualquier lugar de una casilla individual para empezar a arrastrarla.
Con latile-header opción, solo puedes hacer clic y mantener pulsado en la sección de cabecera de la casilla para iniciar el proceso de arrastre.

[!Note] While the tile is in maximized or fullscreen state, the tile cannot be dragged.

Al igual que con el cambio de tamaño, cuando inicias el proceso de arrastrar y soltar, aparece un elemento fantasma debajo del mosaico que has agarrado. A medida que arrastra el mosaico, el elemento fantasma se mueve con él, reordenando dinámicamente los otros mosaicos en tiempo real. Esto le permite obtener una vista previa de cómo se verá la cuadrícula de mosaicos cuando suelte el mosaico.

<IgrTileManager dragMode="tile-header">
  <IgrTile>
    <span slot="title">Tile 1 header</span>
    <p>Tile 1 Content</p>
  </IgrTile>
  <IgrTile>
    <span slot="title">Tile 2 header</span>
    <p>Tile 2 Content</p>
  </IgrTile>
</IgrTileManager>

Serialization

El Administrador de mosaicos proporciona métodos que ayudan a administrar el diseño de los mosaicos:

ElsaveLayout método te permite guardar la disposición actual de las losetas en el Administrador de Losetas, captura el orden, tamaño y posición actuales de todas las losetas, para que luego puedas restaurarlas a esta configuración exacta.
ElloadLayout método te permite cargar un diseño guardado previamente. Al llamarse, restaura las casillas al estado exacto en que estaban cuando se guardó el diseño, incluyendo su orden, tamaño y posición.

Styling

También puedes personalizar la apariencia de los dos componentes -IgrTileManageryIgrTile. SoloIgrTileManager expone una propiedad CSS,base que puede usarse para estilizar el envoltorio base del Administrador de Tiles. ExponeIgrTile varias propiedades CSS que podemos utilizar:

Nombre de la pieza	Descripción
`base`	Contenedor de envoltura del componente de mosaico.
`header`	El contenedor de encabezado del icono, incluidas las partes de título y acciones.
`title`	El contenedor de títulos.
`actions`	El contenedor de acciones.
`content-container`	El contenedor que envuelve la ranura predeterminada del mosaico.
`trigger-side`	The horizontal adorner.
`trigger`	The diagonal adorner
`trigger-bottom`	The vertical adorner.

Con estos elementos CSS, puede personalizar la apariencia de los dos componentes de la siguiente manera:

igc-tile-manager::part(base) {
  background-color: var(--ig-surface-900);
}

igc-tile::part(content-container) {
  color: var(--ig-secondary-200);
}

igc-tile::part(header) {
  background-color: var(--ig-gray-300);
}

igc-tile::part(title) {
  color: var(--ig-primary-400);
}

igc-tile:nth-child(n+2)::part(trigger-side),
igc-tile:nth-child(n+2)::part(trigger-bottom) {
  background-color: var(--ig-success-500);
}

igc-tile:nth-child(n+2)::part(trigger) {
  background-color: var(--ig-error-500);
}

También puedes cambiar el icono de los adorners por uno personalizado usando lasside-adorner ranuras y,corner-adorner ybottom-adorner Por ejemplo:

<IgrTile>
  <IgrIcon slot="side-adorner" className="side" name="indicator"></IgrIcon>
  <IgrIcon slot="corner-adorner" className="corner" name="indicator"></IgrIcon>
  <IgrIcon slot="bottom-adorner" className="bottom" name="indicator"></IgrIcon>
  <span slot="title">Tile header</span>
</IgrTile>