Angular Tree Grid Size

O design do IgxTreeGrid é 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 Tree Grid Size Example

Usage

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

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

E agora vamos ver em detalhes como cada opção reflete no componente Tree Grid. Quando você alterna entre tamanhos diferentes, a altura de cada elemento da Grade de Árvore 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 de árvore 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-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" width="100%"
    height="550px" [allowFiltering]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [hasSummary]="true" width="200px"></igx-column>
    <igx-column-group [pinned]="false" header="General Information">
        <igx-column field="HireDate" 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="Person Details">
            <igx-column field="ID" dataType="number" [filterable]="false"></igx-column>
            <igx-column field="Title" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Age" dataType="number" [sortable]="true" [hasSummary]="true"
                [summaries]="numberSummaries" [filterable]="false"></igx-column>
        </igx-column-group>
    </igx-column-group>
    <igx-column-group header="Address Information">
        <igx-column-group header="Location">
            <igx-column field="Country" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="City" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Address" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Fax" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="PostalCode" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
    <igx-column-group header="Address Information">
        <igx-column-group header="Location">
            <igx-column field="Country" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="City" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
            <igx-column field="Address" dataType="string" [sortable]="true" [hasSummary]="true"></igx-column>
        </igx-column-group>
        <igx-column-group header="Contact Information">
            <igx-column field="Phone" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
            <igx-column field="Fax" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
            <igx-column field="PostalCode" dataType="string" [sortable]="true" [resizable]="true"></igx-column>
        </igx-column-group>
    </igx-column-group>
</igx-tree-grid>

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

@ViewChild('treeGrid', { read: IgxTreeGridComponent })
public treeGrid: IgxTreeGridComponent;

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 IgxTreeGrid oferece para você, a fim de poder alterar a altura das linhas no Tree Grid, é a propriedade rowHeight. Então, vamos ver em ação como essa propriedade afeta o layout da Grade de Árvore 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 de Árvore, conforme descrito acima;

E agora podemos estender nosso exemplo e adicionar rowHeight propriedade à Grade de Árvore:

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

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Angular Tree Grid Size