Web Components Tamaño de la cuadrícula

    The Ignite UI for Web Components Size feature in Web Components Grid allows users to control the spacing and layout of data within the IgcGridComponent. By changing --ig-size, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three size options:

    • --ig-size-large
    • --ig-size-medium
    • --ig-size-small

    Web Components Grid Size Example

    Usage

    Como puedes ver en la demo anterior, ofreceIgcGridComponent tres opciones de tamaño: pequeño, mediano y grande. El fragmento de código a continuación muestra cómo establecer--ig-size una clase 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 cada opción refleja elIgcGridComponent componente. Cuando cambias entre diferentes opciones de tamaño, la altura de cadaIgcGridComponent elemento y los rellenos correspondientes se modifican. Además, si quieres aplicar columnaswidth personalizadas, por favor considera que debe ser mayor que la suma del relleno izquierdo y derecho:

    • grande: este es el tamaño por defectoIgcGridComponent con la intensidad más baja y la altura de fila iguales a.50px Los acolchones izquierdo y derecho son24px; La columnawidth mínima es80px;
    • Media: es el tamaño medio intenso con40px altura de fila. Los acolchones izquierdo y derecho son16px; La columnawidth mínima es64px;
    • Pequeña: es la talla con mayor intensidad y32px altura de fila. Los acolchones izquierdo y derecho son12px; La columnawidth mínima es56px;

    [!Note] Please keep in mind that currently you can not override any of the sizes.

    Ahora continuemos con nuestra muestra y veamos en acción cómo se aplica.--ig-size Primero añadimos 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 queIgcGridComponent te permite cambiar la altura de las filasIgcGridComponent es la propiedadrowHeight. Así que veamos en acción cómo esta propiedad afecta alIgcGridComponent diseño junto con el--ig-size.

    Por favor tenga en cuenta lo siguiente:

    • --ig-sizeLa variable CSS no tendrá impacto en la altura de la fila si serowHeight especifica.
    • --ig-size​afectará a todos los demás elementos de la Red, como se ha descrito anteriormente.

    Ahora podemos ampliar nuestra muestra y añadirrowHeight propiedades a: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.