Angular Tamanho da grade hierárquica

    O design do IgxHierarchicalGrid é baseado nas Diretrizes do Material Design. 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 Hierarchical Grid Size Example

    Usage

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

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

    E agora vamos ver em detalhes como cada opção reflete no componente Hierarchical Grid. Quando você alterna entre tamanhos diferentes, a altura de cada elemento da Grade Hierárquica 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 Hierárquica com a menor intensidade e altura de 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-hierarchical-grid #hGrid [data]="localdata" [height]="'600px'" [width]="'100%'" [allowFiltering]="true">
    <igx-column field="CustomerID"></igx-column>
    <igx-column field="CompanyName"></igx-column>
    <igx-column field="ContactName"></igx-column>
    <igx-column field="ContactTitle"></igx-column>
    <igx-column field="Address"></igx-column>
    <igx-column field="City"></igx-column>
    <igx-column field="PostalCode"></igx-column>
    <igx-column field="Country"></igx-column>
    <igx-column field="Phone"></igx-column>
    <igx-column field="Fax"></igx-column>

    <igx-row-island [key]="'Orders'" [autoGenerate]="false" #layout1 >
            <igx-column field="OrderID"></igx-column>
            <igx-column field="EmployeeID"></igx-column>
            <igx-column field="OrderDate"></igx-column>
            <igx-column field="RequiredDate"></igx-column>
            <igx-column field="ShippedDate"></igx-column>
            <igx-column field="ShipVia"></igx-column>
            <igx-column field="Freight"></igx-column>
            <igx-column field="ShipName"></igx-column>
            <igx-column field="ShipAddress"></igx-column>
            <igx-column field="ShipCity"></igx-column>
            <igx-column field="ShipPostalCode"></igx-column>
            <igx-column field="ShipCountry"></igx-column>
        <igx-row-island [key]="'OrderDetails'" [autoGenerate]="false">
                <igx-column field="ProductID"></igx-column>
                <igx-column field="UnitPrice"></igx-column>
                <igx-column field="Quantity"></igx-column>
                <igx-column field="Discount"></igx-column>
        </igx-row-island>
    </igx-row-island>

</igx-hierarchical-grid>

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

    @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent })
public hierarchicalGrid: IgxHierarchicalGridComponent;

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 IgxHierarchicalGrid fornece para você, para poder alterar a altura das linhas na Grade Hierárquica, é a propriedade rowHeight. Então, vamos ver em ação como essa propriedade afeta o layout da Grade Hierárquica 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 Hierárquica, conforme descrito acima;

    E agora podemos estender nosso exemplo e adicionar rowHeight propriedade à Grade Hierárquica:

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.