Tamaño de la cuadrícula React

    La función Ignite UI for React Size en React Grid permite a los usuarios controlar el espaciado y el diseño de los datos dentro de 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

    Ejemplo de tamaño de cuadrícula React

    EXAMPLE
    DATA
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    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);
    }
    css
    <IgrGrid id="grid" className="gridSize">
    </IgrGrid>
    tsx

    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 a 50px. Los acolchados izquierdo y derecho son 24px; La columna width mínima es 80px;
    • Medio: este es el tamaño medio intenso con 40px la altura de la fila. Los acolchados izquierdo y derecho son 16px; La columna width mínima es 64px;
    • Pequeño: este es el tamaño con mayor intensidad y 32px altura de fila. Los acolchados izquierdo y derecho son 12px; La columna width mínima es 56px;

    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 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>
    tsx

    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>
    tsx

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

    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 se rowHeight 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>
    tsx
    Ignite UI for React | CTA Banner

    Referencias de API

    Recursos adicionales

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