Angular Tamanho da grade

    O projeto do IgxGrid é baseado nas Diretrizes de Design de Materiais. Atualmente, oferecemos uma opção para escolher entre um conjunto predefinido de opções de tamanho que trarão uma visão pequena, média ou grande, respectivamente. Ao selecionar o tamanho certo para sua tabela de Material UI/grade de Material UI, você pode melhorar significativamente a experiência do usuário ao interagir com grandes quantidades de conteúdo.

    Angular Grid Size Example

    Usage

    Como você pode ver na demonstração acima, o IgxGrid oferece três opções de tamanho: pequeno, médio e grande. O trecho de código abaixo mostra como definir o tamanho:

    <igx-grid #grid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-grid>

    E agora vamos ver em detalhes como cada opção reflete no componente Grid. Quando você alterna entre tamanhos diferentes, a altura de cada elemento de grade e os preenchimentos correspondentes serão alterados. Além disso, se você deseja aplicar a largura da coluna personalizada, considere o fato de que ela deve ser maior que a soma do preenchimento esquerdo e direito.

    • --ig-size-large- este é o tamanho padrão da grade com a menor intensidade e altura da linha igual a 50px. Os preenchimentos esquerdo e direito são 24px; A coluna width mínima é 80px;
    • --ig-size-medium- este é o tamanho médio com 40px altura de linha. Os preenchimentos esquerdo e direito são 16px; A coluna width mínima é 64px;
    • --ig-size-small- este é o menor tamanho com 32px altura de linha. Os preenchimentos esquerdo e direito são 12px; A coluna width mínima é 56px;
    Note

    Lembre-se de que atualmente você não pode substituir nenhum dos tamanhos.

    Vamos agora continuar com nosso exemplo e ver em ação como cada tamanho é aplicado. Vamos primeiro adicionar um botão que nos ajudará a alternar entre cada tamanho:

    <div class="density-chooser">
    <igx-buttongroup [values]="sizes"></igx-buttongroup>
</div>

    @ViewChild(IgxButtonGroupComponent) public buttonGroup: IgxButtonGroupComponent;
public size = 'small';
public sizes;

public ngOnInit() {
    this.sizes = [
        {
            label: 'small',
            selected: this.size === 'small',
            togglable: true
        },
        {
            label: 'medium',
            selected: this.sie === 'medium',
            togglable: true
        },
        {
            label: 'large',
            selected: this.size === 'large',
            togglable: true
        }
    ];
}

    Agora podemos adicionar a marcação.

    <div class="density-chooser">
    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
</div>
<igx-grid #grid [data]="data" width="100%" height="550px" [allowFiltering]="true">
    <igx-column-group  header="Customer Information">
    <igx-column field="CustomerName" header="Customer Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column-group  header="Customer Address">
        <igx-column field="Country" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="City" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
            </igx-column>
        <igx-column field="Address" header="Address" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
        <igx-column field="PostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
        </igx-column>
    </igx-column-group>
    </igx-column-group>
    <igx-column field="Salesperson" header="Sales Person" [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="ShipperName" header="Shipper Name"  [dataType]="'string'" [sortable]="true" [hasSummary]="true">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date"  [dataType]="'date'" [sortable]="true" [hasSummary]="true">
        <ng-template igxCell let-cell="cell" let-val>
            {{val | date:'dd/MM/yyyy'}}
        </ng-template>
    </igx-column>
    <igx-column-group  header="Product Details">
        <igx-column field="ProductID" header="ID" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="ProductName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="Quantity" header="Quantity" [dataType]="'number'" [sortable]="true" [hasSummary]="true" [filterable]="false">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true" [hasSummary]="true" >
        </igx-column>
    </igx-column-group>
    <igx-column-group  header="Shipping Information">
        <igx-column field="ShipName" header="Name" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
        </igx-column>
        <igx-column-group  header="Shipping Address">
            <igx-column field="ShipCountry" header="Country" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column field="ShipCity" header="City" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
            <igx-column field="ShipPostalCode" header="Postal Code" [dataType]="'string'" [sortable]="true" [hasSummary]="true" >
            </igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-grid>

    Finalmente, vamos fornecer a lógica necessária para realmente aplicar o tamanho:

    @ViewChild('grid', { read: IgxGridComponent })
public grid: IgxGridComponent;

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}


@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

    Outra opção que o IgxGrid oferece para você, para poder alterar a altura das linhas no Grid, é a propriedade rowHeight. Então, vamos ver em ação como essa propriedade afeta o layout da grade junto com a--ig-size variável CSS.

    Lembre-se do seguinte:

    • --ig-size A variável CSS NÃO terá impacto na altura da linha se houver rowHeight especificado;
    • --ig-size​ ​afetará todos os demais elementos da Grade, conforme descrito acima;

    E agora podemos estender nosso exemplo e adicionar rowHeight propriedade ao Grid:

    <igx-grid #grid [data]="data" [rowHeight]="'80px'" width="100%" 
height="550px" [allowFiltering]="true">
..............
</igx-grid>

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.