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-tamanho-grande- este é o tamanho padrão da grade com o menor intenso e a altura da linha iguais a50px. Os acolchoamentos à esquerda e à direita são24px: Colunawidth mínima é80px;
    • --ig-tamanho-médio- este é o tamanho médio com40px altura da fileira. Os acolchoamentos à esquerda e à direita são16px: Colunawidth mínima é64px;
    • --ig-tamanho-pequeno- Este é o menor tamanho com32px altura de fileira. Os acolchoamentos à esquerda e à direita são12px: Colunawidth 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 mudar a altura das linhas na Grade é a propriedaderowHeight. 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-sizeA variável CSS NÃO terá impacto na altura da linha se houver rowHeight especificado;
    • --ig-size​afetará todos os demais elementos da Grade, como foi descrito acima;

    E agora podemos estender nossa amostra e adicionarrowHeight propriedades à Grade:

    <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.