Visão geral do Angular Tile Manager

    O componente Gerenciador de blocos permite a exibição de conteúdo em blocos individuais. Ele permite que os usuários interajam com esses blocos reorganizando-os e redimensionando-os, dando-lhes a liberdade de personalizar o layout e a aparência do conteúdo de acordo com suas preferências. Essa flexibilidade aprimora a experiência do usuário, permitindo uma maneira mais personalizada e eficiente de visualizar e gerenciar conteúdo.

    Angular Tile Manager Example

    O exemplo Ignite UI for Angular Gerenciador de blocos a seguir mostra o componente em ação.

    Warning

    Devido à política de permissões do iframe, o botão de tela cheia neste exemplo só funcionará quando o exemplo for aberto no modo autônomo clicando no botão "Expandir para tela cheia" no canto superior direito.

    Getting Started with Ignite UI for Angular Tile Manager

    Ignite UI Tile Manager é um componente da Web padrão e, como tal, pode ser usado em um aplicativo Angular.

    Para começar a usá-lo, primeiro você precisa instalar o pacote Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents --save

    Em seguida, você deve chamar a função com argumento em seu main.ts arquivo ou no arquivo de componente.ts que está usando IgcTileManager. defineCustomElements()​ ​IgcTileManagerComponent​

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

defineComponents(IgcTileManagerComponent);

    Você também precisa incluir o CUSTOM_ELEMENTS_SCHEMA esquema na configuração do seu componente

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

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

    Agora você pode começar com uma configuração básica do Angular Tile Manager.

    Usage

    O Gerenciador de Blocos fornece um comportamento de layout de bloco base, gerenciando o posicionamento de blocos no estado maximizado ou normal. Os ladrilhos podem ser dimensionados independentemente uns dos outros e usados para formar layouts complexos. Os usuários finais podem reordenar os blocos arrastando-os e soltando-os, proporcionando uma experiência flexível e intuitiva.

    O Tile Manager oferece dois componentes que podemos usar:

    • IgcTileComponent- Este componente representa um bloco individual exibido no Gerenciador de blocos.
    • IgcTileManagerComponent- Este é o componente principal que contém todos os componentes do bloco, servindo como contêiner para todo o layout do bloco.
    <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>

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico Introdução.

    Para obter mais informações sobre o uso do componente Gerenciador de blocos, você pode conferir este tópico.