Ignite UI for Angular 16.1.0: O que há de novo?

Ignite UI for Angular está em constante evolução para melhorar a experiência dos desenvolvedores. Com a versão Ignite UI for Angular 16.1.0, fazemos exatamente isso – oferecendo melhores processos de criação de aplicativos, mas também padronizando a experiência do usuário em todas as nossas estruturas modernas de componentes de interface do usuário, incluindo Ignite UI for Angular, Ignite UI for Web Components e Ignite UI for Blazor.

Try Ignite UI for Angular

O novo dimensionamento de componentes Ignite UI (versão prévia) - e agora...

Ignite UI for Angular 16.1.0 apresenta uma nova maneira de dimensionar componentes com o objetivo de substituir as propriedades de entrada DisplayDensityToken e displayDensity existentes. O lançamento oficial está agendado para Ignite UI for Angular 17.0.0 e as propriedades serão removidas no Ignite UI for Angular 18.0.0. A maneira de definir a densidade de exibição ou o tamanho dos componentes daqui para frente é utilizando uma única propriedade CSS personalizada – –ig-size.

Por que tudo isso foi necessário?

Essa mudança não apenas nos permitiu eliminar várias ligações de classe CSS espalhadas por todos os nossos componentes Angular, mas também nos capacitou a simplificar a implementação do dimensionamento de componentes nas folhas de estilo CSS. O que temos agora é uma maneira universal de alterar o tamanho de todos os componentes em um aplicativo em todas as nossas estruturas modernas de componentes de interface do usuário.

As ferramentas que usamos para implementar o dimensionamento de componentes no Ignite UI for Angular 16.1.0 agora são expostas como API Sass pública, que permite que seus componentes e layouts respondam a alterações em –ig-size da mesma forma que Ignite UI for Angular componentes.

Como dimensionar seus componentes

1. Comece com uma limpeza – Remova todas as declarações em que o DisplayDensityToken é fornecido:

// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDen

Remova todas as associações ou atribuições programáticas para a propriedade de entrada displayDensity:

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</

2. Em seguida, mova seu aplicativo para o dimensionamento baseado em CSS – Em vez disso, use a propriedade CSS personalizada –ig-size para obter o mesmo resultado que com displayDensity. Além de –ig-size, incluímos propriedades CSS para os tamanhos de componentes permitidos:

• –ig-size-small – dimensionará o componente para o equivalente a compact;
• –ig-size-medium – dimensionará o componente para o equivalente a cosy;
• –ig-size-large – dimensionará o componente para o equivalente a confortável;

Aqui está um exemplo prático:

/* Add --ig-size to a component or global file. */
igx-grid {
--ig-size: var(--ig-size-small);
}

Como alternativa, se você quiser que todos os componentes do seu aplicativo sejam pequenos, faça o seguinte:

body {
--ig-size: var(--ig-size-small);
}

3. Crie layouts personalizados que respondam à mudança de tamanho – Como mencionado anteriormente, o Ignite UI for Angular 16.1.0 expõe uma API Sass nova e fácil de usar como parte de nossa biblioteca de temas, permitindo que você crie layouts e componentes consideráveis. Digamos que queremos criar um elemento div que altere seu tamanho com base no valor de –ig-size. Veja como podemos alcançá-lo:

<div class="square"></div>

@use "igniteui-angular/theming" as *;
%sizable-element {
@include sizable();
}
.square {
/* Make the element sizable */
@extend %sizable-element;
/*
* Define the default size of the element and
* bind it to the `--ig-size` custom property
*/
--component-size: var(--ig-size, var(--ig-size-large));
/* Define small (10px), medium (20px), and large (30px) sizes */
--size: #{sizable(10px, 20px, 30px)};
width: var(--size);
height: var(--size);
container: square;
}

Como você pode ver no exemplo acima, utilizando apenas um mixin Sass e uma função, tornamos nosso elemento considerável. Toda vez que você alterar o valor de –ig-size para uma das opções permitidas, o elemento .square será redimensionado.

Bonus

No futuro, quando o suporte para consultas de contêiner for mais amplamente adotado em todos os navegadores, poderemos colher ainda mais benefícios de ter –ig-size.

/* Set the background to red when the square container is small */
@container square style(--component-size: 1) {
  .square {
    background: red;
  }
}

Embrulhar

Comprometidos em fornecer a você o melhor kit de ferramentas de interface do usuário Angular e insights relacionados, nosso objetivo é capacitá-lo com mais know-how, novos recursos, desempenho aprimorado e estabilidade aprimorada. Além do mais novo Pivot Grid que é tão crucial, sabemos que outros componentes, como o Angular Data Grid, também são supercríticos. É por isso que publicamos um tutorial útil da Grade de Dados da IU do Angular para ajudar você a aprender a criar uma Grade de IU do Angular com todos os recursos do zero. Vá em frente e assista.

Além disso, com o objetivo de acelerar ainda mais todo o processo de design para código, continuamos a desenvolver a melhor plataforma low-code baseada em nuvem —App Builder (TM). Ele mapeia Sketch ou Figma arquivos de design para componentes reais da interface do usuário, criando código pronto para produção em Angular, Blazor ou Web Components.

Algumas das melhorias foram adicionadas graças às solicitações de usuários como você por meio de nosso repositório Ignite UI for Angular 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.

Por fim, sabemos que a transparência e a visibilidade de nossos próximos objetivos também são fundamentais. É por isso que mantemos sempre o roteiro atualizado.

Além disso

​Siga-Ignite UI for Angular 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.