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

The IgrTileManager provides a base tile layout behavior, managing the placement of tiles in maximized or normal state. The tiles can be sized independently of each other and used to form complex layouts. End users can reorder tiles by dragging and dropping them, providing a flexible and intuitive experience.

El Tile Manager ofrece dos componentes que podemos utilizar:

IgrTile - This component represents an individual tile displayed within the Tile Manager.
IgrTileManager - This is the main component that contains all of the tile components, serving as the container for the entire tile layout.

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

We can specify the number of grid columns for our Tile Manager. To do this, simply set the columnCount property to the desired number of columns. If the number is less than one or the property is not set, the Tile Manager will create as many columns as can fit, with each column being at least 200px wide and expanding to equally share the available space. When the viewport dimensions change, the tiles will also rearrange themselves to maximize the use of space.

<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

Another property that can be used in the Tile Manager is the gap property, which defines the space between tiles. The value of the gap property must be a number followed by a length unit (e.g., px, rem, em, ...). This value will apply to both the horizontal gap (width) and the vertical gap (height) between tiles.

<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

We also have properties for setting the minimum width of the columns (minColumnWidth) and the minimum height of the rows (minRowHeight) in the Tile Manager. Similar to the gap property, the values for these properties must be a number followed by a length unit. These values will define the minimum width for all columns and the minimum height for all rows in the Tile Manager.

<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:

The colSpan property specifies how many columns the tile will span across in the layout, allowing you to control its horizontal size.
The rowSpan property determines how many rows the tile will span vertically, adjusting the tile's height within the layout.
The colStart property specifies the starting column where the tile is placed.
The rowStart property specifies the starting row where the tile is placed.
The disableFullscreen property hides the default fullscreen action button.
The disableMaximize property hides the default maximize toggle action button.
The disableResize property prevents the tile from being resized by the user.

<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:

The maximize button enlarges the tile's content to fill the entire width of the Tile Manager, offering a wider view of the content.
The fullscreen button enables the tile to open in fullscreen mode in the user's browser.

If you want to display just one of the two buttons, you can set either disableMaximize or disableFullscreen property. To customize the appearance you can use the maximize-action slot for the maximize button, or the fullscreen-action slot for the fullscreen button.

<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.

We can use the resizeMode property to control how resizing is applied in the Tile Manager. It can be set to none, hover or always, which determines when the resize adorners are visible. The default value is none and the tile could not be resized.

<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:

A tile cannot be resized smaller than its defined minimum width or height (minColumnWidth, minRowHeight).
Un mosaico no puede exceder el espacio horizontal máximo disponible en la cuadrícula.

Reorder

You can reorder tiles in the Tile Manager using the drag-and-drop feature. By default, tiles are not draggable. To enable this functionality, set the dragMode property on the Tile Manager to either tile or tile-header.

With the tile option, you can click and hold anywhere on an individual tile to start dragging it.
With the tile-header option, you can only click and hold in the tile's header section to start the dragging process.

[!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:

The saveLayout method allows you to save the current arrangement of tiles in the Tile Manager, it captures the current order, size and position of all tiles, so you can later restore it to this exact configuration.
The loadLayout method enables you to load a previously saved layout. When called, it restores the tiles to the exact state they were in when the layout was saved, including their order, size and position.

Styling

You can also customize the appearance of the two components - IgrTileManager and IgrTile. The IgrTileManager exposes only one CSS property - base which can be used for styling the base wrapper of the Tile Manager. The IgrTile exposes several CSS properties we can use:

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);
}

You can also change the icon of the adorners to a custom one using the side-adorner, corner-adorner, and bottom-adorner slots. For instance:

<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>