Web Components Tamaño de la cuadrícula

    La función Ignite UI for Web Components Tamaño en Web Components Grid permite a los usuarios controlar el espaciado y la disposición de los datos dentro de laIgcGridComponent. Al cambiar--ig-size, puedes mejorar significativamente la experiencia del usuario al interactuar con grandes cantidades de contenido. Pueden elegir entre tres opciones de tallas:

    • --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.