Tamanho

    A configuração de tamanho pode melhorar significativamente a representação visual de grandes quantidades de dados. No Ignite UI for Angular, fornecemos um conjunto predefinido de opções:

    • grande
    • médio
    • pequeno

    Usando a propriedade CSS personalizada--ig-size, você pode configurar o tamanho em nível de aplicativo ou componente.

    Angular Size Example

    Note

    Para começar a usar Ignite UI for Angular em seus próprios projetos, certifique-se de ter configurado todas as dependências necessárias e de ter realizado a configuração adequada do seu projeto. Você pode aprender como fazer isso no tópico de instalação.

    Usage

    Definir tamanho em nível de aplicativo/componente

    Para definir o tamanho, use a propriedade personalizada CSS--ig-size. Você pode definir o tamanho para todos os componentes em seu aplicativo definindo a propriedade mencionada acima no elemento body.

    Os valores disponíveis para--ig-size são--ig-size-small,--ig-size-medium e--ig-size-large.

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

    Para definir o tamanho em um nível de componente, direcione o seletor de elementos. Por exemplo, para definir o tamanho do grupo de entrada para small, você pode fazer:

    igx-input-group {
    --ig-size: var(--ig-size-small);
}

    Incorporating size in your own components and layouts

    Ignite UI for Angular expõe algumas funções Sass e um mixin que permitem implementar layouts que reagem a alterações da propriedade CSS--ig-size.

    Aqui está um exemplo de como podemos fazer um elemento alterar sua largura e altura com base no valor de--ig-size.

    <div class="my-elem"></div>

    @use "igniteui-angular/theming" as *;

.my-elem {
    // Make the element sizable
    @include sizable();

    // Define the default size of the element and hook it to the `--ig-size` property
    --component-size: var(--ig-size, var(--ig-size-large));

    // Define sizes for small (10px), medium (20px), and large (30px)
    --size: #{sizable(10px, 20px, 30px)};
    width: var(--size);
    height: var(--size);
}

    Agora, sempre que o valor de--ig-size for alterado,.my-elem mudará seu tamanho.

    API References

    Sizing and Spacing Functions

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.