Descripción general de Angular Tile Manager

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

Ejemplo de Angular Tile Manager

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

import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit} from '@angular/core';
import { IgxAvatarComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxIconComponent, IgxIconService, IgxListComponent, IgxListItemComponent, IgxListLineDirective, IgxListThumbnailDirective} from 'igniteui-angular';
import { defineComponents, IgcTileManagerComponent } from 'igniteui-webcomponents';

defineComponents(IgcTileManagerComponent);

@Component({
    selector: 'app-tile-manager',
    styleUrls: ['./tile-manager.component.scss'],
    templateUrl: './tile-manager.component.html',
    imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardThumbnailDirective, IgxCardContentDirective, IgxListComponent, IgxListItemComponent, IgxListThumbnailDirective, IgxAvatarComponent, IgxIconComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class TileManagerComponent implements OnInit {
    constructor(protected _iconService: IgxIconService) {}

    public ngOnInit() {
        const listIcon =
          '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M11 7h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20.1 3H3.9c-.5 0-.9.4-.9.9v16.2c0 .4.4.9.9.9h16.2c.4 0 .9-.5.9-.9V3.9c0-.5-.5-.9-.9-.9zM19 19H5V5h14v14z"/></svg>';
    
        const calendarIcon =
          '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M19,4h-1V2h-2v2H8V2H6v2H5C3.89,4,3.01,4.9,3.01,6L3,20c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V6C21,4.9,20.1,4,19,4z M19,20 H5V10h14V20z M9,14H7v-2h2V14z M13,14h-2v-2h2V14z M17,14h-2v-2h2V14z M9,18H7v-2h2V18z M13,18h-2v-2h2V18z M17,18h-2v-2h2V18z"/></svg>'
    
        const productIcon =
          '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#e3e3e3"><path d="M13,10h-2V8h2V10z M13,6h-2V1h2V6z M7,18c-1.1,0-1.99,0.9-1.99,2S5.9,22,7,22s2-0.9,2-2S8.1,18,7,18z M17,18 c-1.1,0-1.99,0.9-1.99,2s0.89,2,1.99,2s2-0.9,2-2S18.1,18,17,18z M8.1,13h7.45c0.75,0,1.41-0.41,1.75-1.03L21,4.96L19.25,4l-3.7,7 H8.53L4.27,2H1v2h2l3.6,7.59l-1.35,2.44C4.52,15.37,5.48,17,7,17h12v-2H7L8.1,13z"/></svg>'
    
        this._iconService.addSvgIconFromText("list", listIcon, "material");
        this._iconService.addSvgIconFromText("calendar", calendarIcon, "material");
        this._iconService.addSvgIconFromText("product", productIcon, "material");
      }
}ts

<igc-tile-manager id="tile-manager1" column-count="3" gap="20px" resize-mode="hover" drag-mode="tile-header">
    <igc-tile row-span="3">
        <span slot="title">Order info</span>
        <igx-list>
            <igx-list-item>
            <igx-avatar igxListThumbnail shape="circle" >
                <igx-icon igxListThumbnail name="list" collection="material" class="material-icons"></igx-icon>
            </igx-avatar>
            <div igxListLineTitle class="content">
                <p>OrderID</p>
                <p>10293</p>
            </div>
            </igx-list-item>
            <igx-list-item>
            <igx-avatar igxListThumbnail shape="circle" class="avatar">
                <igx-icon name="list" collection="material" class="material-icons"></igx-icon>
            </igx-avatar>
            <div igxListLineTitle class="content">
                <p>Customer Name</p>
                <p>Tortuga Restaurante</p>
            </div>
            </igx-list-item>
            <igx-list-item>
            <igx-avatar igxListThumbnail shape="circle" class="avatar">
                <igx-icon name="calendar" collection="material" class="material-icons"></igx-icon>
            </igx-avatar>
            <div igxListLineTitle class="content">
                <p>Order Date</p>
                <p>August 29, 1996</p>
            </div>
            </igx-list-item>
            <igx-list-item>
            <igx-avatar igxListThumbnail shape="circle" class="avatar">
                <igx-icon name="calendar" collection="material" class="material-icons"></igx-icon>
            </igx-avatar>
            <div igxListLineTitle class="content">
                <p>Shipped Date</p>
                <p>September 11, 1996</p>
            </div>
            </igx-list-item>
            <igx-list-item>
                <igx-avatar igxListThumbnail shape="circle" class="avatar">
                    <igx-icon name="list" collection="material" class="material-icons"></igx-icon>
                </igx-avatar>
                <div igxListLineTitle class="content">
                    <p>Product Name</p>
                    <p>Carnavon Tigers</p>
                </div>
            </igx-list-item>
            <igx-list-item>
                <igx-avatar igxListThumbnail shape="circle" class="avatar">
                    <igx-icon name="list" collection="material" class="material-icons"></igx-icon>
                </igx-avatar>
                <div igxListLineTitle class="content">
                    <p>Ship Country</p>
                    <p>Mexico</p>
                </div>
            </igx-list-item>
        </igx-list>
    </igc-tile>
    <igc-tile col-span="2" row-span="2">
        <span slot="title">Order Line Items</span>
        <div class="group">
            <div class="card">
                <igx-card elevated>
                    <igx-card-header>
                        <div igxCardThumbnail>
                            <igx-avatar shape="circle" collection="material">
                                <igx-icon name="product" collection="material" class="material-icons"></igx-icon>
                            </igx-avatar>
                        </div>
                        <h3 igxCardHeaderTitle>Carnavon Tigers</h3>
                    </igx-card-header>
                    <igx-card-content class="column">
                        <div class="body-content">
                            <span>Quantity</span><span>12</span>
                        </div>
                        <div class="body-content">
                            <span>Unit Price</span><span>$50</span>
                        </div>
                    </igx-card-content>
                </igx-card>
            </div>
            <div class="card">
                <igx-card elevated>
                <igx-card-header>
                    <div igxCardThumbnail>
                        <igx-avatar shape="circle">
                            <igx-icon name="product" collection="material" class="material-icons"></igx-icon>
                        </igx-avatar>
                    </div>
                    <span slot="title">Guarana Fantastica</span>
                </igx-card-header>
                <igx-card-content class="column">
                    <div class="body-content">
                        <span>Quantity</span> <span>10</span>
                    </div>
                    <div class="body-content">
                        <span>Unit Price</span> <span>$4</span>
                    </div>
                </igx-card-content>
                </igx-card>
            </div>
            <div class="card">
                <igx-card elevated>
                    <igx-card-header>
                    <div igxCardThumbnail>
                        <igx-avatar shape="circle">
                        <igx-icon name="product" collection="material" class="material-icons"></igx-icon>
                        </igx-avatar>
                    </div>
                    <span slot="title">Vegie-spread</span>
                    </igx-card-header>
                    <igx-card-content class="column">
                    <div class="body-content">
                        <span>Quantity</span> <span>5</span>
                    </div>
                    <div class="body-content">
                        <span>Unit Price</span> <span>$35</span>
                    </div>
                    </igx-card-content>
                </igx-card>
            </div>
            <div class="card">
                <igx-card elevated>
                    <igx-card-header>
                    <div igxCardThumbnail>
                        <igx-avatar shape="circle">
                        <igx-icon name="product" collection="material" class="material-icons"></igx-icon>
                        </igx-avatar>
                    </div>
                    <span slot="title">Rhonbrau Klosterbier</span>
                    </igx-card-header>
                    <igx-card-content class="column">
                    <div class="body-content">
                        <span>Quantity</span> <span>7</span>
                    </div>
                    <div class="body-content">
                        <span>Unit Price</span> <span>$6</span>
                    </div>
                    </igx-card-content>
                </igx-card>
            </div>
        </div>
    </igc-tile>
    <igc-tile >
        <span slot="title">Order Value</span>
        <div class="string">
            <h3>$8.66K</h3>
        </div>
    </igc-tile>
    <igc-tile >
        <span slot="title">Item quantity</span>
        <div class="string">
            <h3>4</h3>
        </div>
    </igc-tile>
</igc-tile-manager>
html

igc-tile-manager {
    margin-bottom: 5px;
  }
  
  .group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 15px;
  }
  
  .card {
    min-height: 30px;
    min-width: 250px;
    max-width: 320px;
    margin: 0 15px 15px 15px
  }
  
  igx-card-content {
    color: var(--content-text-color);
  }
  
  .body-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .string {
    text-align: center;
    margin-top: 50px;
    color: var(--ig-gray-800);
  }
   
  .sample {
    overflow: auto;
  }
  .content {
    display: flex;
    justify-content: space-between;
  }
scss

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Debido a la política de permisos de iframe, el botón de pantalla completa en este ejemplo solo funcionará cuando el ejemplo se abra en modo independiente haciendo clic en el botón 'Expandir a pantalla completa' en la esquina superior derecha.

Introducción a Ignite UI for Angular Tile Manager

Ignite UI Tile Manager es un componente web estándar y, como tal, se puede utilizar en una aplicación Angular.

Para comenzar a usarlo, primero debe instalar el paquete Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents --save
cmd

A continuación, debe llamar a la función con el defineCustomElements() argumento en su main.ts archivo o en el archivo de componente.ts que está utilizando IgcTileManager. IgcTileManagerComponent

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

defineComponents(IgcTileManagerComponent);
ts

También debe incluir el esquema en la CUSTOM_ELEMENTS_SCHEMA configuración del componente

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent {
typescript

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

Uso

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:

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

<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 al Ignite UI for Angular, lea el tema Introducción.

Para obtener más información sobre el uso del componente Administrador de mosaicos, puede consultar este tema.

Descripción general de Angular Tile Manager

Ejemplo de Angular Tile Manager

Introducción a Ignite UI for Angular Tile Manager

Uso

Tematización