Visão geral do Web Components Tile Manager

O componente Gerenciador de Blocos Web Components 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.

Web Components Tile Manager Example

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

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

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:

TileComponent- Este componente representa um bloco individual exibido no Gerenciador de blocos.
TileManagerComponent- Este é o componente principal que contém todos os componentes do bloco, servindo como contêiner para todo o layout do bloco.

Começando

Para começar a usar o Tile Manager, primeiro você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Antes de usar o Tile Manager, você precisa importá-lo da seguinte maneira:

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

defineComponents(IgcTileManagerComponent);

Agora você pode começar com uma configuração básica do 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>

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

Layout

Columns and Rows

Podemos especificar o número de colunas de grade para nosso Gerenciador de blocos. Para fazer isso, basta definir a column-count propriedade para o número desejado de colunas. Se o número for menor que um ou a propriedade não estiver definida, o Gerenciador de Blocos criará quantas colunas puderem caber, com cada coluna tendo pelo menos 200 px de largura e se expandindo para compartilhar igualmente o espaço disponível. Quando as dimensões da viewport forem alteradas, os blocos também serão reorganizados para maximizar o uso do espaço.

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

Neste trecho de código, os três blocos no Gerenciador de Blocos serão organizados em 2 linhas e 2 colunas.

Gap

Outra propriedade que pode ser usada no Gerenciador de Blocos é a gap propriedade, que define o espaço entre os blocos. O valor da propriedade deve ser um número seguido por uma unidade de gap comprimento (por exemplo, px, rem, em, ...). Esse valor será aplicado à folga horizontal (largura) e à folga vertical (altura) entre os ladrilhos.

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

Minimum width and height

Também temos propriedades para definir a largura mínima das colunas (min-column-width) e a altura mínima das linhas (min-row-height) no Gerenciador de Blocos. Semelhante à propriedade gap, os valores dessas propriedades devem ser um número seguido por uma unidade de comprimento. Esses valores definirão a largura mínima para todas as colunas e a altura mínima para todas as linhas no Gerenciador de Blocos.

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

Example

Tile component

O componente Bloco tem propriedades que podem ser definidas individualmente para cada bloco. Algumas dessas propriedades incluem:

A col-span propriedade especifica quantas colunas o bloco se estenderá no layout, permitindo que você controle seu tamanho horizontal.
A row-span propriedade determina quantas linhas o bloco se estenderá verticalmente, ajustando a altura do bloco dentro do layout.
A col-start propriedade especifica a coluna inicial onde o bloco é colocado.
A row-start propriedade especifica a linha inicial em que o bloco é colocado.
A disable-fullscreen propriedade oculta o botão de ação de tela inteira padrão.
A disable-maximize propriedade oculta o botão de ação de alternância maximizar padrão.
A disable-resize propriedade impede que o bloco seja redimensionado pelo usuário.

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

O componente Tile também expõe vários slots que podem ser usados:

Nome do slot	Descrição
`title`	Conteúdo para o cabeçalho do bloco.
`fullscreen-action`	Substitua o conteúdo padrão da ação em tela cheia.
`maximize-action`	Overwrite the default maximize action content.
`actions`	Conteúdo personalizado renderizado após as ações padrão.
`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

Por padrão, a seção de cabeçalho inclui dois botões de ação:

O maximize botão amplia o conteúdo do bloco para preencher toda a largura do Gerenciador de blocos, oferecendo uma visão mais ampla do conteúdo.
O fullscreen botão permite que o bloco seja aberto no modo de tela inteira no navegador do usuário.

Se você quiser exibir apenas um dos dois botões, poderá definir a propriedade ou disable-maximize disable-fullscreen. Para personalizar a aparência, você pode usar o maximize-action slot para o botão maximizar ou o fullscreen-action slot para o botão de tela cheia.

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

Você também tem a opção de desativar os dois botões de ação e criar botões personalizados de acordo com suas preferências.

Neste exemplo, criamos botões de ação personalizados usando o componente Ignite UI Botão de Ícone.

Resizing

O redimensionamento no Gerenciador de blocos é uma funcionalidade que permite que os blocos sejam redimensionados usando três adornos de redimensionamento diferentes.

Adorador lateral: Ajusta a largura modificando o vão da coluna.
Adorador inferior: Ajusta a altura modificando a extensão da linha.
Adorador de canto: Ajusta a largura e a altura simultaneamente.

Para garantir um redimensionamento suave, um elemento fantasma é usado em vez de modificar diretamente as dimensões do bloco. Esse elemento aparece na parte superior do bloco original, exibindo suas dimensões atuais quando o redimensionamento é iniciado e é atualizado em tempo real à medida que o usuário arrasta qualquer uma das alças de redimensionamento.

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

O Gerenciador de Blocos se reorganiza automaticamente quando um bloco muda de tamanho, garantindo que haja um espaço vazio mínimo. É por isso que expandir um ladrilho pode empurrar ladrilhos adjacentes para novas posições, enquanto o encolhimento cria lacunas que outros ladrilhos podem preencher dinamicamente. Isso garante que o Gerenciador de blocos permaneça o mais compacto possível, sem blocos sobrepostos, e que todos os movimentos permaneçam dentro da estrutura de grade definida.

Podemos usar a propriedade para controlar como o resize-mode redimensionamento é aplicado no Gerenciador de Blocos. Ele pode ser definido como,ou none hover always, o que determina quando os adornos de redimensionamento estão visíveis. O valor padrão é none e o bloco não pôde ser redimensionado.

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

Você pode ver a diferença entre os três estados no exemplo abaixo:

Limitations

Há várias restrições e limitações no processo de redimensionamento:

Um bloco não pode ser redimensionado para menos do que sua largura ou altura mínima definida (minColWidth, minRowHeight).
Um bloco não pode exceder o espaço horizontal máximo disponível na grade.

Reorder

Você pode reordenar os blocos no Gerenciador de blocos usando o recurso de arrastar e soltar. Por padrão, os blocos não podem ser arrastados. Para habilitar essa funcionalidade, defina a drag-mode propriedade no Gerenciador de Blocos como ou tile tile-header.

Com a tile opção, você pode clicar e segurar em qualquer lugar em um bloco individual para começar a arrastá-lo.
Com a tile-header opção, você só pode clicar e segurar na seção de cabeçalho do bloco para iniciar o processo de arrastar.

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

Semelhante ao redimensionamento, quando você inicia o processo de arrastar e soltar, um elemento fantasma aparece abaixo do bloco que você pegou. À medida que você arrasta o bloco, o elemento fantasma se move com ele, reordenando dinamicamente os outros blocos em tempo real. Isso permite que você visualize como a grade de blocos ficará quando você soltar o bloco.

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

Serialization

O Gerenciador de Blocos fornece métodos que ajudam a gerenciar o layout dos blocos:

O saveLayout método permite que você salve a disposição atual dos blocos no Gerenciador de blocos, ele captura a ordem, o tamanho e a posição atuais de todos os blocos, para que você possa restaurá-los posteriormente para essa configuração exata.
O loadLayout método permite que você carregue um layout salvo anteriormente. Quando chamado, ele restaura os blocos para o estado exato em que estavam quando o layout foi salvo, incluindo sua ordem, tamanho e posição.

Styling

Você também pode personalizar a aparência dos dois componentes -Tile Manager e Tile. O Tile Manager expõe apenas uma propriedade CSS -base que pode ser usada para estilizar o wrapper base do Gerenciador de blocos. O Tile componente expõe várias propriedades CSS que podemos usar:

Nome da peça	Descrição
`base`	O recipiente de encapsulamento do componente de bloco.
`header`	O contêiner de cabeçalho do bloco, incluindo as partes de título e ações.
`title`	O contêiner de título.
`actions`	O contêiner de ações.
`content-container`	O contêiner que encapsula o slot padrão do bloco.
`trigger-side`	The horizontal adorner.
`trigger`	The diagonal adorner
`trigger-bottom`	The vertical adorner.

Usando essas partes CSS, você pode personalizar a aparência dos dois componentes da seguinte maneira:

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

Você também pode alterar o ícone dos adornos para um personalizado usando os side-adorner slots , corner-adorner, e bottom-adorner. Para fazer isso, crie um igc-icon elemento dentro do elemento de bloco. Em seguida, defina seu slot para um dos três adornos e especifique o nome do ícone que deseja usar.

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