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 - this is the default Grid size with the lowest intense and row height equal to 50px. Left and Right paddings are 24px; Minimal column width is 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})`;
}

    Another option that IgxGrid provides for you, in order to be able to change the height of the rows in the Grid, is the property rowHeight. So let's see in action how this property affects the Grid layout along with the --ig-size CSS variable.

    Lembre-se do seguinte:

    • --ig-sizeA variável CSS NÃO terá impacto na altura da linha se houver rowHeight especificado;
    • --ig-size will affect all of the rest elements in the Grid, as it has been described above;

    And now we can extend our sample and add rowHeight property to the 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.