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

EleIgrTileManager fornece um comportamento de layout de tiles base, gerenciando a colocação dos tiles no estado maximizado ou normal. Os azulejos podem ser dimensionados independentemente uns dos outros e usados para formar layouts complexos. Os usuários finais podem reordenar os tiles 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 dentro do Gerenciador de Blocos.
• IgrTileManager- Este é o componente principal que contém todos os componentes do tile, servindo como o recipiente para todo o layout do tile.

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 uma introdução completa ao Ignite UI for React, leia o tópico Comecando.

Layout

Columns and Rows

Podemos especificar o número de colunas de grade para nosso Gerenciador de Tiles. Para isso, basta definir acolumnCount 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 Tiles criará o maior número possível de colunas que caber, com cada coluna tendo pelo menos 200px de largura e expandindo-se para compartilhar igualmente o espaço disponível. Quando as dimensões da janela de visualização mudam, os tiles também se reorganizam 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 Tiles é a propriedadegap, que define o espaço entre os tiles. O valor dagap propriedade deve ser um número seguido por uma unidade de comprimento (por exemplo, px, rem, em, ...). Esse valor se aplicará tanto ao espaço horizontal (largura) quanto ao espaço vertical (altura) entre os azulejos.

<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 Tiles. Semelhante à propriedade do intervalo, 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 Tiles.

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

• AcolSpan propriedade especifica quantas colunas o tile terá no layout, permitindo que você controle seu tamanho horizontal.
• ArowSpan propriedade determina quantas linhas o bloco irá se estender verticalmente, ajustando a altura do bloco dentro do layout.
• AcolStart propriedade especifica a coluna inicial onde o bloco está posicionado.
• ArowStart propriedade especifica a linha inicial onde a peça está posicionada.
• AdisableFullscreen propriedade esconde o botão padrão de ação em tela cheia.
• AdisableMaximize propriedade esconde o botão padrão de ativar a ação de maximizar.
• AdisableResize propriedade impede que o tile 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:

• Omaximize 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.
• Ofullscreen botão permite que o bloco abra em modo tela cheia no navegador do usuário.

Se quiser exibir apenas um dos dois botões, pode definir qualquer umdisableMaximize​disableFullscreen dos dois proprietários. Para personalizar a aparência, você pode usar omaximize-action slot para maximizar oufullscreen-action o 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 aresizeMode propriedade para controlar como o redimensionamento é aplicado no Tile Manager. Pode ser definido paranone,hover oualways, que determina quando os adornadores de redimensionamento são visíveis. O valor padrão énone e o tile 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:

• Uma peça não pode ser redimensionada menor 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 tiles no Gerenciador de Tiles usando o recurso de arrastar e soltar. Por padrão, os tiles não são arrastáveis. Para habilitar essa funcionalidade, defina adragMode propriedade no Gerenciador de Tiles para um outile outrotile-header.

• Com essatile opção, você pode clicar e segurar em qualquer lugar de um tile individual para começar a arrastá-lo.
• Com essatile-header opção, você só pode clicar e segurar na seção de cabeçalho do tile 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:

• OsaveLayout método permite salvar a disposição atual dos tiles no Tile Manager, ele captura a ordem, tamanho e posição atuais de todos os tiles, para que você possa restaurar depois exatamente essa configuração.
• OloadLayout método permite que você carregue um layout previamente salvo. Quando chamado, ele restaura os tiles exatamente no estado 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 -IgrTileManagerandIgrTile. EleIgrTileManager expõe apenas uma propriedade CSS —baseque pode ser usada para estilizar o envelope base do Gerenciador de Tiles. EleIgrTile 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 trocar o ícone dos adornadores por um personalizado usando osside-adorner​corner-adorner slots ebottom-adorner and. 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>

API Reference

• IgrTileManager
• IgrTile
• Styling & Themes

Additional Resources

• IgrTile
• IgrTileManager
• Ignite UI for React Forums
• Ignite UI for React GitHub