React Tamaño de la cuadrícula
La función Tamaño de Ignite UI for React en React cuadrícula permite a los usuarios controlar el espaciado y el diseño de los datos dentro de la IgrGrid
. Al cambiar--ig-size
, puede mejorar significativamente la experiencia del usuario al interactuar con grandes cantidades de contenido. Pueden elegir entre tres opciones de tamaño:
--ig-size-large
--ig-size-medium
--ig-size-small
React Grid Size Example
Usage
Como puede ver en la demostración anterior, ofrece IgrGrid
tres opciones de tamaño: pequeño, mediano y grande. El siguiente fragmento de código muestra cómo establecer--ig-size
en línea o parte de una clase CSS:
.gridSize {
--ig-size: var(--ig-size-medium);
}
<IgrGrid id="grid" className="gridSize">
</IgrGrid>
Y ahora veamos en detalle cómo se refleja cada opción en el IgrGrid
componente. Al cambiar entre diferentes opciones de tamaño, se cambiará la altura de cada IgrGrid
elemento y los rellenos correspondientes. Además, si desea aplicar una columna width
personalizada, tenga en cuenta el hecho de que debe ser más grande que la suma del relleno izquierdo y derecho.
- large: este es el tamaño predeterminado
IgrGrid
con la intensidad más baja y la altura de fila igual a50px
. Los acolchados izquierdo y derecho son24px
; La columnawidth
mínima es80px
; - Medio: este es el tamaño medio intenso con
40px
la altura de la fila. Los acolchados izquierdo y derecho son16px
; La columnawidth
mínima es64px
; - Pequeño: este es el tamaño con mayor intensidad y
32px
altura de fila. Los acolchados izquierdo y derecho son12px
; La columnawidth
mínima es56px
;
[!Note] Please keep in mind that currently you can not override any of the sizes.
Continuemos ahora con nuestro ejemplo y veamos en acción cómo se aplica el--ig-size
. Primero agreguemos un botón que nos ayudará a cambiar entre cada tamaño:
<IgrPropertyEditorPanel
ref={propertyEditorRef}
componentRenderer={renderer}
target={grid}
descriptionType="WebGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
name="SizeEditor"
label="Grid Size:"
valueType="EnumValue"
dropDownNames={["Small", "Medium", "Large"]}
dropDownValues={["Small", "Medium", "Large"]}
changed={this.webGridSetGridSize}>
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
Ahora podemos agregar el marcado.
<IgrGrid id="grid" autoGenerate="false" ref={gridRef} data={invoicesData} allowFiltering="true">
<IgrColumn field="CustomerName" header="Customer Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Country" header="Country" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="City" header="City" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Address" header="Address" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="PostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Salesperson" header="Sales Person" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipperName" header="Shipper Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="OrderDate" header="Order Date" dataType="Date" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ProductID" header="ID" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ProductName" header="Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="UnitPrice" header="Unit Price" dataType="Number" sortable="true" hasSummary="true" filterable="false">
</IgrColumn>
<IgrColumn field="Quantity" header="Quantity" dataType="Number" sortable="true" hasSummary="true" filterable="false">
</IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="Discontinued" header="Discontinued" dataType="Boolean" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipName" header="Name" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipCountry" header="Country" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipCity" header="City" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
<IgrColumn field="ShipPostalCode" header="Postal Code" dataType="String" sortable="true" hasSummary="true">
</IgrColumn>
</IgrGrid>
Finalmente, proporcionemos la lógica necesaria para aplicar realmente el tamaño:
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this.propertyEditor = r;
this.setState({});
}
private sizeEditor: IgrPropertyEditorPropertyDescription
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.propertyEditorRef = this.propertyEditorRef.bind(this);
this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
this.gridRef = this.gridRef.bind(this);
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebHierarchicalGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
Otra opción que IgrGrid
le proporciona, para poder cambiar la altura de las filas en el IgrGrid
, es la propiedad rowHeight
. Así que veamos en acción cómo esta propiedad afecta el IgrGrid
diseño junto con el--ig-size
.
Por favor tenga en cuenta lo siguiente:
--ig-size
La variable CSS no tendrá ningún impacto en la altura de la fila si serowHeight
especifica.--ig-size
afectará a todos los demás elementos de la cuadrícula, como se ha descrito anteriormente.
Ahora podemos ampliar nuestro ejemplo y agregar la propiedad rowHeight
a IgrGrid
:
<IgrGrid id="grid" className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering="true">
</IgrGrid>
API References
Additional Resources
- 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
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.