Angular Tree Grid Size

    El diseño de IgxTreeGrid se basa en las Pautas de diseño de materiales. Actualmente ofrecemos una opción para elegir entre un conjunto predefinido de opciones de tamaño que brindarán una vista pequeña, mediana o grande respectivamente. Al seleccionar el tamaño correcto para su tabla Material UI/cuadrícula Material UI, puede mejorar significativamente la experiencia del usuario al interactuar con grandes cantidades de contenido.

    Angular Tree Grid Size Example

    Usage

    Como puede ver en la demostración anterior, IgxTreeGrid ofrece tres opciones de tamaño: pequeño, mediano y grande. El siguiente fragmento de código muestra cómo configurar el tamaño:

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

    Y ahora veamos en detalle cómo se refleja cada opción en el componente Tree Grid. Cuando cambia entre diferentes tamaños, se cambiará la altura de cada elemento de Tree Grid y los rellenos correspondientes. Además, si desea aplicar un ancho de columna personalizado, considere el hecho de que debe ser mayor que la suma del relleno izquierdo y derecho.

    • --ig-size-large- este es el tamaño predeterminado de la cuadrícula del árbol con el intenso más bajo y la altura de fila iguales a50px. Los acolchones izquierdo y derecho son24px; La columnawidth mínima es80px;
    • --ig-talla-media- es la talla media con40px altura de fila. Los acolchones izquierdo y derecho son16px; La columnawidth mínima es64px;
    • --ig-tamaño-pequeño- Este es el tamaño más pequeño con32px altura de fila. Los acolchones izquierdo y derecho son12px; La columnawidth mínima es56px;
    Note

    Tenga en cuenta que actualmente no puede anular ninguno de los tamaños.

    Continuemos ahora con nuestro ejemplo y veamos en acción cómo se aplica cada tamaño. Primero agreguemos un botón que nos ayudará a cambiar entre cada tamaño:

    <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
        }
    ];
}

    Ahora podemos agregar el marcado.

    <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, proporcionemos la lógica necesaria para aplicar realmente el tamaño:

    @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})`;
}

    Otra opción que IgxTreeGrid te ofrece para poder cambiar la altura de las filas en la Tree Grid es la propiedadrowHeight. Así que veamos en acción cómo esta propiedad afecta al diseño de la cuadrícula del árbol junto con la--ig-size variable CSS.

    Por favor tenga en cuenta lo siguiente:

    • --ig-sizeLa variable CSS NO tendrá impacto en la altura de la fila si se especifica la altura de la fila​;
    • --ig-size​afectará a todos los demás elementos de la Red del Árbol, como se ha descrito anteriormente;

    Y ahora podemos ampliar nuestra muestra y añadirrowHeight propiedades a la Tree Grid:

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

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.