Web Components Tamanho da grade

    O recurso Tamanho Ignite UI for Web Components no Web Components Grid permite que os usuários controlem o espaçamento e o layout dos dados dentro do IgcGridComponent. Ao alterar--ig-size, você pode melhorar significativamente a experiência do usuário ao interagir com grandes quantidades de conteúdo. Eles podem escolher entre três opções de tamanho:

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

    Web Components Grid Size Example

    Usage

    Como você pode ver na demonstração acima, o fornece IgcGridComponent três opções de tamanho: pequeno, médio e grande. O trecho de código abaixo mostra como definir--ig-size inline ou parte de uma classe CSS:

    .gridSize {
    --ig-size: var(--ig-size-medium);
}

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

    E agora vamos ver em detalhes como cada opção reflete no IgcGridComponent componente. Quando você alterna entre diferentes opções de tamanho, a altura de cada IgcGridComponent elemento e os preenchimentos correspondentes serão alterados. Além disso, se você quiser aplicar uma coluna width personalizada, considere o fato de que ela deve ser maior que a soma do preenchimento esquerdo e direito.

    • grande- este é o tamanho padrão IgcGridComponent com o menor intenso e altura de linha igual a 50px. Os preenchimentos esquerdo e direito são 24px; A coluna width mínima é 80px;
    • Médio- Este é o tamanho médio intenso com 40px altura da linha. Os preenchimentos esquerdo e direito são 16px; A coluna width mínima é 64px;
    • Pequeno- Este é o tamanho com maior intensidade e 32px altura de linha. Os preenchimentos esquerdo e direito são 12px; A coluna width mínima é 56px;

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

    Vamos agora continuar com nosso exemplo e ver em ação como o--ig-size é aplicado. Vamos primeiro adicionar um botão que nos ajudará a alternar entre cada tamanho:

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

    Agora podemos adicionar a marcação.

    <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, vamos fornecer a lógica necessária para realmente aplicar o tamanho:

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

    Outra opção que IgcGridComponent fornece para você, para poder alterar a altura das linhas no IgcGridComponent, é a propriedade rowHeight. Então, vamos ver em ação como essa propriedade afeta o IgcGridComponent layout junto com o--ig-size.

    Lembre-se do seguinte:

    • --ig-size A variável CSS não terá impacto na altura da linha se for rowHeight especificada.
    • --ig-size afetará todos os demais elementos da Grade, conforme descrito acima.

    Agora podemos estender nosso exemplo e adicionar rowHeight propriedade ao IgcGridComponent:

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.