Estilos de impressão

O mecanismo de temas Ignite UI for Angular fornece alguns estilos de impressão padrão, que garantem que nossos componentes tenham pelo menos o mínimo necessário para ter a mesma aparência no papel como aparecem na página da Web.

How to make use of the printing styles

Para garantir que os componentes fiquem totalmente visíveis no papel, você precisa se certificar de que eles são do mesmo tamanho ou menores que o documento para impressão, caso contrário, eles serão cortados.

By default the printing styles are incorporated in the compiled CSS. If you are not planning to print, we suggest you turn them off in order to reduce the size of the outputted CSS.

You can do that in your theme SCSS file:

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

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// Turn the print styles off by setting the $print-layout param to false.
@include core($print-layout: false)

// Add the theme and the palette.
@include theme($default-palette);

Desde a v13.2, decidimos não ocultar nenhum componente por padrão, pois não sabemos quais partes você deseja que fiquem visíveis no papel, deixamos isso para você decidir.

In order to remove a piece or a whole component from the printed page, you can either add the class .igx-no-print to the element/component you don't want to print, or if you don't have access to the DOM you can directly target that element tag or class and set its display: none.

Let's say that you can't' accesses a button in the DOM to put .igx-no-print on it. You can still hide that button from printing styles using SCSS.

@media print {
    [igxButton] {
        display: none;
    }
}

Aqui, @media impressão é usada para garantir que os estilos que você escreve dentro só tenham efeito durante a impressão.

If you want to print in black and white you can use .igx-bw-print class on any element and that element and everything inside it will turn black & white when printed.

To print the igx-grid we recommend using the export to excel feature or making a screenshot of the grid and printing it.