Visão geral do React Tile Manager

O componente Gerenciador de Blocos Ignite UI for React 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.

React Tile Manager Example

O exemplo Ignite UI for React 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 IgrTileManager 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:

IgrTile- Este componente representa um bloco individual exibido no Gerenciador de blocos.
IgrTileManager- 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 React executando o seguinte comando:

npm install igniteui-react

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

import { IgrTile, IgrTileManager } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

  <IgrTileManager>
    <IgrTile>
      <p>Tile 1</p>
    </IgrTile>
    <IgrTile>
      <p>Tile 2</p>
    </IgrTile>
    <IgrTile>
      <p>Tile 3</p>
    </IgrTile>
  </IgrTileManager>

Para obter uma introdução completa ao Ignite UI for React, 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 columnCount 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.

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

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.

<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

Também temos propriedades para definir a largura mínima das colunas (minColumnWidth) e a altura mínima das linhas (minRowHeight) 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.

<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

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

A colSpan propriedade especifica quantas colunas o bloco se estenderá no layout, permitindo que você controle seu tamanho horizontal.
A rowSpan propriedade determina quantas linhas o bloco se estenderá verticalmente, ajustando a altura do bloco dentro do layout.
A colStart propriedade especifica a coluna inicial onde o bloco é colocado.
A rowStart propriedade especifica a linha inicial em que o bloco é colocado.
A disableFullscreen propriedade oculta o botão de ação de tela inteira padrão.
A disableMaximize propriedade oculta o botão de ação de alternância maximizar padrão.
A disableResize propriedade impede que o bloco seja redimensionado pelo usuário.

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

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

<IgrTileManager>
  <IgrTile disableFullscreen={true}>
    <IgrIconButton slot="maximize-actions" name="north_east" collection="material">
    </IgrIconButton>
    <p>Tile 1 Content</p>
  </IgrTile>
</IgrTileManager>

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

<IgrTileManager resizeMode="hover">
  <IgrTile>
    <p>Tile 1</p>
  </IgrTile>
  <IgrTile>
    <p>Tile 2</p>
  </IgrTile>
</IgrTileManager>

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

Snapping

Os blocos são redimensionados em unidades de grade completas, o que significa que eles só podem aumentar ou diminuir por colunas ou linhas inteiras. O elemento fantasma se encaixa na próxima coluna ou linha ao se expandir além da metade do caminho e ao anterior ao encolher além da marca da metade. Isso se aplica a todos os adornos (inferior, lateral e canto), garantindo que os ladrilhos sempre fiquem alinhados à grade.

As lacunas da grade também são consideradas, mantendo o layout consistente durante o redimensionamento.

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 (minColumnWidth, 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 dragMode 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.

<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

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 -IgrTileManager e IgrTile. O IgrTileManager expõe apenas uma propriedade CSS -base que pode ser usada para estilizar o wrapper base do Gerenciador de blocos. O IgrTile 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. Por exemplo:

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