Personalizando temas no Ignite UI for Web Components

    Os temas em Ignite UI for Web Components podem ser personalizados alterando várias variáveis CSS. Ao substituir essas variáveis, você pode personalizar as paletas, tipografia, elevações, arredondamento, tamanho e espaçamento.

    Visão geral

    Abordamos paletas, tipografia e elevações nas seções a seguir, enquanto esta abordará opções que afetam os estilos de componentes em um nível global por meio de modificações de variável única.

    Roundness

    Todos os componentes definem algum tipo de arredondamento (raio da borda). Enquanto alguns componentes fornecem atributos para definir a forma do componente, como o avatar e o emblema, outros, como o botão, definem apenas seu raio de borda internamente como parte do tema. Nesses casos, você pode brincar com o border-radius desses componentes modificando o--ig-radius-factor valor da variável CSS. Você pode modificá-lo globalmente no:root escopo ou modificá-lo componente por componente. A variável aceita um valor de número racional entre 0 e 1. Definir o valor como 0 define efetivamente o raio da borda como 0. Definir o valor como 1 define o raio da borda para o raio da borda inicial predefinido. Qualquer valor entre 0 e 1, como 0,5, por exemplo, definirá o raio da borda para 50% do raio da borda padrão definido na folha de estilo do componente.

    Examples:

    /* Set the border-radius for all components to 50% of their default value. */
:root {
  --ig-radius-factor: .5;
}

    /* Set the border-radius of the button component to 0. */
igc-button {
  --ig-radius-factor: 0;
}

    Elevation

    Semelhante ao raio global, alguns componentes definem a elevação interna (box-shadow). Tornar todos os componentes planos pode ser tedioso se fizermos isso substituindo a sombra da caixa para cada um. Você pode modificar o comportamento da sombra da caixa para todos os componentes modificando a--ig-elevation-factor variável CSS. A variável aceita um valor de número racional entre 0 e 1. Definir o valor como 0 define efetivamente a sombra de caixa de todos os componentes como nenhum. Definir o valor como 1 define o valor de elevação para os valores iniciais predefinidos de sombra de caixa. Qualquer valor entre 0 e 1, como 0,5, por exemplo, definirá a intensidade da sombra da caixa para 50% do valor original definido na folha de estilo do componente.

    /* Set the elevation for all components to 50% of their original box-shadow values. */
:root {
  --ig-elevation-factor: .5;
}

    Tamanho

    Alguns componentes suportam o dimensionamento variável -small, medium, e large com um tamanho padrão sendo definido na folha de estilo do componente. Você pode modificar o tamanho de todos os componentes simultaneamente ou individualmente utilizando a--ig-size variável CSS. Os valores possíveis são var(--ig-size-small), var(--ig-size-medium), ou var(--ig-size-large);

    Para definir um tamanho específico para todos os componentes em seu aplicativo, defina a--ig-size​:root variável no escopo.

    Exemplo:

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

    Como alternativa, se você quiser direcionar apenas um componente específico, defina o escopo da variável para o seletor de tags do componente.

    igc-avatar {
  --ig-size: var(--ig-size-medium);
}

    Spacing

    O espaçamento refere-se aos preenchimentos e margens dos componentes internos, conforme definido pelo tema do componente. O espaçamento pode ser horizontal (embutido) e vertical (bloco). Facilitamos o controle de como vários elementos são preenchidos em um componente, sem substituir explicitamente todos os valores de preenchimento e margem manualmente para cada componente. Isso é feito pela--ig-spacing variável CSS. Você pode definir seu valor como qualquer número racional positivo. O espaçamento será dimensionado de acordo. O valor padrão é 1, que representa o preenchimento/margem horizontal/vertical padrão, conforme definido na folha de estilo do componente. Alterar o valor para 1,5 dimensionará todo o espaçamento em 1,5 vezes ou 150%. Por outro lado, definir o valor como 0 agrupará tudo e reduzirá todo o espaçamento para a equivalência de nenhum preenchimento/margem. Alterar o fator de espaçamento funciona em conjunto com a propriedade size e será dimensionado de acordo.

    Alguns componentes permitem que você altere apenas o espaçamento em uma direção (horizontal ou verticalmente), enquanto outros permitem especificar valores de espaçamento separados em ambas as direções.

    Para alterar o espaçamento de todos os componentes, você pode substituir seu valor no:root escopo.

    Exemplo:

    /* Increase the spacing for all components to 150%. */
:root {
  --ig-spacing: 1.5;
}

    Para alterar o espaçamento de um único componente, defina o escopo da variável para o seletor de tags do componente.

    /* Reduce the spacing for the drop-down elements to 50% of their original value. */
igc-dropdown {
  --ig-spacing: 0.5;
}

    Como mencionado anteriormente, você pode controlar o espaçamento horizontal e vertical individualmente para os componentes que o suportam. Isso pode ser alcançado modificando as--ig-spacing-inline variáveis (horizontal) e--ig-spacing-block (vertical). O princípio é o mesmo da--ig-spacing variável. Modificar apenas a--ig-spacing variável alterará o espaçamento em ambas as direções na mesma quantidade.

    API References

    • ConfigureTheme