Descripción general de Web Components Tile Manager

    El componente Administrador de mosaicos de Web Components 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.

    Web Components Tile Manager Example

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    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

    El Administrador de mosaicos proporciona un comportamiento de diseño de mosaico base, administrando la ubicación de los mosaicos en estado maximizado o normal. Las baldosas pueden tener un tamaño independiente entre sí y se pueden utilizar para formar diseños complejos. Los usuarios finales pueden reordenar los mosaicos arrastrándolos y soltándolos, lo que proporciona una experiencia flexible e intuitiva.

    El Tile Manager ofrece dos componentes que podemos utilizar:

    • TileComponent- Este componente representa un mosaico individual que se muestra dentro del Administrador de mosaicos.
    • TileManagerComponent- Este es el componente principal que contiene todos los componentes de la baldosa, sirviendo como contenedor para todo el diseño de la tesela.

    Empezando

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

    npm install igniteui-webcomponents
cmd

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

    import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);
ts

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

    <igc-tile-manager>
  <igc-tile>
    <p>Tile 1</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 2</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 3</p>
  </igc-tile>
</igc-tile-manager>
html

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    Ignite UI for Web Components | CTA Banner

    Layout

    Columns and Rows

    Podemos especificar el número de columnas de la cuadrícula para nuestro Administrador de mosaicos. Para ello, basta con establecer la column-count propiedad en el número deseado de columnas. Si el número es menor que uno o la propiedad no está establecida, el Administrador de mosaicos creará tantas columnas como quepa, cada columna tendrá al menos 200 px de ancho y se expandirá para compartir equitativamente el espacio disponible. Cuando cambian las dimensiones de la ventanilla, los mosaicos también se reorganizarán para maximizar el uso del espacio.

    <igc-tile-manager column-count="2">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Content for Tile 1</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Content for Tile 2</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 3 header</span>
    <p>Content for Tile 3</p>
  </igc-tile>
  ...
</igc-tile-manager>
html

    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 se puede utilizar en el Administrador de mosaicos es la gap propiedad, que define el espacio entre mosaicos. El valor de la gap 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 (alto) entre mosaicos.

    <igc-tile-manager gap="20px">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Content for Tile 1</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Content for Tile 2</p>
  </igc-tile>
  ...
</igc-tile-manager>
html

    Minimum width and height

    También tenemos propiedades para establecer el ancho mínimo de las columnas (min-column-width) y la altura mínima de las filas (min-row-height) en el Administrador de mosaicos. De forma similar a la propiedad gap, 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.

    <igc-tile-manager min-column-width="200px" min-row-height="150px">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Content for Tile 1</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Content for Tile 2</p>
  </igc-tile>
  ...
</igc-tile-manager>
html

    Example

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    Tile component

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

    • La col-span propiedad especifica el número de columnas que abarcará el mosaico en el diseño, lo que le permite controlar su tamaño horizontal.
    • La row-span propiedad determina el número de filas que se extenderá verticalmente el mosaico, ajustando la altura del mosaico dentro del diseño.
    • La col-start propiedad especifica la columna inicial donde se coloca el mosaico.
    • La row-start propiedad especifica la fila inicial en la que se coloca el mosaico.
    • La disable-fullscreen propiedad oculta el botón de acción de pantalla completa predeterminado.
    • La disable-maximize propiedad oculta el botón de acción de alternancia de maximización predeterminado.
    • La disable-resize propiedad impide que el usuario cambie el tamaño del icono.
    <igc-tile-manager>
  <igc-tile col-span="2" disable-resize>
    <span slot="title">Tile 1 header</span>
    <p>Content for Tile 1</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Content for Tile 2</p>
  </igc-tile>
  ...
</igc-tile-manager>
html

    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:

    • El maximize botón amplía el contenido del mosaico para ocupar todo el ancho del Administrador de mosaicos, lo que ofrece una vista más amplia del contenido.
    • El fullscreen botón permite que el icono se abra en modo de pantalla completa en el explorador del usuario.

    Si desea mostrar solo uno de los dos botones, puede establecer una disable-maximize propiedad o disable-fullscreen. Para personalizar la apariencia, puede usar la maximize-action ranura para el botón maximizar o la fullscreen-action ranura para el botón de pantalla completa.

    <igc-tile-manager>
  <igc-tile disable-fullscreen>
    <igc-icon-button slot="maximize-actions" name="north_east" collection="material">
    </igc-icon-button>
    <p>Content for Tile 1</p>
  </igc-tile>
</igc-tile-manager>
html

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    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.

    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 la propiedad para controlar cómo se aplica el resize-mode cambio de tamaño en el Administrador de mosaicos. Se puede establecer en,o none​ ​always, hover que determina cuándo son visibles los adornos de cambio de tamaño. El valor predeterminado es none y no se pudo cambiar el tamaño del mosaico.

    <igc-tile-manager resize-mode='hover'>
  <igc-tile>
    <p>Tile 1</p>
  </igc-tile>
  <igc-tile>
    <p>Tile 2</p>
  </igc-tile>
</igc-tile-manager>
html

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

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    Limitations

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

    • No se puede cambiar el tamaño de un icono más pequeño que su ancho o alto mínimos definidos (minColWidth, minRowHeight).
    • Un mosaico no puede exceder el espacio horizontal máximo disponible en la cuadrícula.

    Reorder

    Puede reordenar los mosaicos en el Administrador de mosaicos mediante la función de arrastrar y soltar. De forma predeterminada, los mosaicos no se pueden arrastrar. Para habilitar esta funcionalidad, establezca la drag-mode propiedad en el Administrador de mosaicos en o tile. tile-header​

    • Con la tile opción, puede hacer clic y mantener presionado en cualquier lugar de un mosaico individual para comenzar a arrastrarlo.
    • Con la tile-header opción, solo puede hacer clic y mantener presionada la sección del encabezado del mosaico para iniciar el proceso de arrastre.

    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.

    <igc-tile-manager drag-mode="tile-header">
  <igc-tile>
    <span slot="title">Tile 1 header</span>
    <p>Content for Tile 1</p>
  </igc-tile>
  <igc-tile>
    <span slot="title">Tile 2 header</span>
    <p>Content for Tile 2</p>
  </igc-tile>
</igc-tile-manager>
html

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    Serialization

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

    • El saveLayout método le permite guardar la disposición actual de las fichas en el Administrador de fichas, captura el orden actual, el tamaño y la posición de todas las fichas, para que luego pueda restaurarlas a esta configuración exacta.
    • El loadLayout método le permite cargar un diseño guardado previamente. Cuando se llama, restaura las baldosas al estado exacto en el que se encontraban cuando se guardó el diseño, incluido su orden, tamaño y posición.

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    Edit in:

    Styling

    También puede personalizar la apariencia de los dos componentes -Tile Manager y Tile. Expone Tile Manager solo una propiedad CSS, base que se puede usar para diseñar el contenedor base del Administrador de mosaicos. El Tile componente expone varias propiedades CSS que podemos usar:

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

    También puede cambiar el icono de los adornos a uno personalizado usando las side-adorner ranuras , corner-adorner, y bottom-adorner. Para ello, cree un igc-icon elemento dentro del elemento tile. A continuación, establezca su ranura en uno de los tres adornos y especifique el nombre del icono que desea utilizar.

    <igc-tile>
  <igc-icon slot="side-adorner" class="side" name="indicator"></igc-icon>
  <igc-icon slot="corner-adorner" class="corner" name="indicator"></igc-icon>
  <igc-icon slot="bottom-adorner" class="bottom" name="indicator"></igc-icon>
  <span slot="title">Tile header</span>
</igc-tile>
html

    EXAMPLE
    TS
    HTML
    index.css
    layout.css
    styles.css
    Edit in:

    API References

    Additional Resources