Tamaño de cuadrícula Angular
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: este es el tamaño de cuadrícula predeterminado con la intensidad más baja y una altura de fila igual a
50px
. Los rellenos izquierdo y derecho son24px
;width
mínimo de columna es80px
; - --ig-size-medium: este es el tamaño medio con una altura de fila
40px
. Los rellenos izquierdo y derecho son16px
;width
mínimo de columna es64px
; - --ig-size-small: este es el tamaño más pequeño con una altura de fila
32px
. Los rellenos izquierdo y derecho son12px
;width
mínimo de columna 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-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})`;
}
Otra opción que te brinda IgxGrid, para poder cambiar la altura de las filas en el Grid, es la propiedad rowHeight
. Entonces, veamos en acción cómo esta propiedad afecta el diseño de la cuadrícula junto con la variable CSS--ig-size
.
Por favor tenga en cuenta lo siguiente:
- --La variable CSS
--ig-size
NO tendrá impacto en la altura de la fila si se especifica RowHeight; --ig-size
afectará a todos los elementos restantes en el Grid, como se describió anteriormente;
Y ahora podemos ampliar nuestro ejemplo y agregar la propiedad rowHeight
al Grid:
<igx-grid #grid [data]="data" [rowHeight]="'80px'" width="100%"
height="550px" [allowFiltering]="true">
..............
</igx-grid>
API References
Additional Resources
- Descripción general de la cuadrícula
- Virtualización y rendimiento
- Edición
- Paginación
- Filtración
- Clasificación
- resúmenes
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
- buscando