Web Components Tamaño de la cuadrícula

    La función Tamaño de Ignite UI for Web Components en Web Components cuadrícula permite a los usuarios controlar el espaciado y el diseño de los datos dentro de la IgcGridComponent. 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

    Web Components Grid Size Example

    Usage

    Como puede ver en la demostración anterior, ofrece IgcGridComponent 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);
}

    <igc-grid id="grid" class="gridSize">
</igc-grid>

    Y ahora veamos en detalle cómo se refleja cada opción en el IgcGridComponent componente. Al cambiar entre diferentes opciones de tamaño, se cambiará la altura de cada IgcGridComponent 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 IgcGridComponent 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;

    [!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:

    <div class="size-chooser">
    <igc-property-editor-panel
    description-type="WebGrid"
    is-horizontal="true"
    is-wrapping-enabled="true"
    name="PropertyEditor"
    id="propertyEditor">
        <igc-property-editor-property-description
        name="SizeEditor"
        id="SizeEditor"
        label="Grid Size:"
        value-type="EnumValue"
        drop-down-names="Small, Medium, Large"
        drop-down-values="Small, Medium, Large">
        </igc-property-editor-property-description>
    </igc-property-editor-panel>
</div>

    Ahora podemos agregar el marcado.

    <igc-grid id="grid" width="100%" height="550px" allow-filtering="true">
    <igc-column-group  header="Customer Information">
    <igc-column field="CustomerName" header="Customer Name" data-type="String" sortable="true" has-summary="true">
    </igc-column>
    <igc-column-group  header="Customer Address">
        <igc-column field="Country" header="Country" data-type="String" sortable="true" has-summary="true">
        </igc-column>
        <igc-column field="City" header="City" data-type="String" sortable="true" has-summary="true">
        </igc-column>
        <igc-column field="Address" header="Address" data-type="String" sortable="true" has-summary="true">
        </igc-column>
        <igc-column field="PostalCode" header="Postal Code" data-type="String" sortable="true" has-summary="true">
        </igc-column>
    </igc-column-group>
    </igc-column-group>
    <igc-column field="Salesperson" header="Sales Person" data-type="String" sortable="true" has-summary="true">
    </igc-column>
    <igc-column field="ShipperName" header="Shipper Name"  data-type="String" sortable="true" has-summary="true">
    </igc-column>
    <igc-column field="OrderDate" header="Order Date"  data-type="Date" sortable="true" has-summary="true">
    </igc-column>
    <igc-column-group  header="Product Details">
        <igc-column field="ProductID" header="ID" data-type="String" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="ProductName" header="Name" data-type="String" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="UnitPrice" header="Unit Price" data-type="Number" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="Quantity" header="Quantity" data-type="Number" sortable="true" has-summary="true" filterable="false">
        </igc-column>
        <igc-column field="Discontinued" header="Discontinued" data-type="Boolean" sortable="true" has-summary="true" >
        </igc-column>
    </igc-column-group>
    <igc-column-group  header="Shipping Information">
        <igc-column field="ShipName" header="Name" data-type="String" sortable="true" has-summary="true" >
        </igc-column>
        <igc-column-group  header="Shipping Address">
            <igc-column field="ShipCountry" header="Country" data-type="String" sortable="true" has-summary="true" >
            </igc-column>
            <igc-column field="ShipCity" header="City" data-type="String" sortable="true" has-summary="true" >
            </igc-column>
            <igc-column field="ShipPostalCode" header="Postal Code" data-type="String" sortable="true" has-summary="true" >
            </igc-column>
        </igc-column-group>
    </igx-column-group>
</igx-grid>

    Finalmente, proporcionemos la lógica necesaria para aplicar realmente el tamaño:

    constructor() {
    var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
    var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    propertyEditor.componentRenderer = this.renderer;
    propertyEditor.target = this.grid;
    this.webGridSetGridSize = this.webGridSetGridSize.bind(this);
    sizeEditor.changed = this.webGridSetGridSize;
    grid.data = this.data;
}

private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
    if (this._componentRenderer == null) {
        this._componentRenderer = new ComponentRenderer();
        var context = this._componentRenderer.context;
        PropertyEditorPanelDescriptionModule.register(context);
        WebGridDescriptionModule.register(context);
    }
    return this._componentRenderer;
}

public webGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): 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 IgcGridComponent le proporciona, para poder cambiar la altura de las filas en el IgcGridComponent, es la propiedad rowHeight. Así que veamos en acción cómo esta propiedad afecta el IgcGridComponent 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 al IgcGridComponent:

    <igc-grid id="grid" class="gridSize" row-height="80px" width="100%" height="550px" allow-filtering="true">
</igc-grid>

    API References

    Additional Resources

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