O que há de novo: Web Components Tile Manager

Esta versão Ignite UI for Web Components 5.3 apresenta um componente totalmente novo e que economiza tempo com recursos que garantem agilidade e experiência ideal do usuário: Tile Manager. Nesta postagem do blog, explicaremos como funciona e veremos recursos como redimensionamento, reordenação, serialização e muito mais.

Web Components Componente Gerenciador de Blocos

O componente Gerenciador de Blocos Web Components fornece interface do usuário para exibir conteúdo em blocos individuais. Ele permite que os usuários interajam com os blocos reorganizando-os e redimensionando-os. A liberdade de personalizar o layout e a aparência do conteúdo de acordo com suas preferências só pode ser igualada pelo componente Dock Manager. Essa flexibilidade aprimora a experiência do usuário, permitindo uma maneira mais personalizada e eficiente de visualizar e gerenciar conteúdo.

Propriedades do Gerenciador de Blocos

Colunas e linhas

Como usuário, você pode definir o número de colunas de grade para Web Components Gerenciador de Blocos. Para fazer isso, basta definir a column-count propriedade para o número desejado de colunas.

Gap

A propriedade Gap 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.

Largura e altura mínimas

São 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.

Redimensionamento

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.

Reordenar

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.

Serialização

O Web Components 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 para essa configuração exata posteriormente.
• 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.

Estilização

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 componente Tile expõe várias propriedades CSS que você pode usar.

Propriedades do componente Lado a lado

O componente Bloco Web Components 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.

Ignite UI for Web Components 5.3.0 Registro de alterações

Explore todos os detalhes aqui.

Added

• Componente do gerenciador de blocos#1402
• List
  • O igc-list-item componente expõe uma nova selected propriedade. Quando definido em um item de lista, o item será destacado visualmente#1590

Mudou

• Progressbar
  • Use theme schemas #1582

Fixed

• Calendar
  • Altura da linha de dias para temas fluentes e Bootstrap #1597
  • Cor do texto de data desativada na visualização do intervalo para temas Material e Indigo #1595
• Chip
  • Estilos de layout responsivos aprimorados #1588
• Combo
  • Estados visuais do botão de alternância aprimorados #1580

---

Para encerrar tudo...

Perfeitamente criado para compatibilidade, Ignite UI for Angular é a biblioteca que permite aproveitar o poder das tecnologias mais recentes e dos principais lançamentos. Comprometidos em fornecer a você o melhor kit de ferramentas de interface do usuário Angular e insights relacionados, nosso objetivo é equipá-lo com mais know-how, novos recursos, desempenho aprimorado e estabilidade aprimorada. Algumas das melhorias foram adicionadas graças às solicitações de usuários como você por meio de nosso repositório Ignite UI for Web Components GitHub. Com isso em mente, estamos sempre abertos a sugestões e feedbacks – isso nos faz crescer e responder melhor às suas necessidades de desenvolvimento.

Se precisar de mais detalhes, recomendamos que você confira nosso:

• Canal do Discord
• Discussões do GitHub
• Roteiro
• Canal do YouTube
• Twitter

Além disso

​Siga Ignite UI no Medium para se manter atualizado e saber mais sobre os últimos projetos relacionados à Angular em que estamos trabalhando. Dê-nos uma estrela no GitHub e ajude-nos a continuar melhorando nosso produto abordando quaisquer preocupações, perguntas ou solicitações de recursos na seção de problemas.