Angular Tamaño de la cuadrícula

    El diseño de IgxGrid 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 Grid Size Example

    Usage

    Como puede ver en la demostración anterior, IgxGrid 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-grid #grid [data]="data" style="--ig-size: var(--ig-size-small)">
</igx-grid>

    Y ahora veamos en detalle cómo se refleja cada opción en el componente Grid. Cuando cambia entre diferentes tamaños, se cambiará la altura de cada elemento de la cuadrícula 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 - 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-size-medium - this is the middle size with 40px row height. Left and Right paddings are 16px; Minimal column width is 64px;
    • --ig-size-small - this is the smallest size with 32px row height. Left and Right paddings are 12px; Minimal column width is 56px;
    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-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, proporcionemos la lógica necesaria para aplicar realmente el tamaño:

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

    Por favor tenga en cuenta lo siguiente:

    • --ig-size CSS variable will have NO impact on row height if there is rowHeight specified;
    • --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

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