React Tamanho da grade

O recurso Tamanho Ignite UI for React no React Grid permite que os usuários controlem o espaçamento e o layout dos dados dentro do IgrGrid. 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

React Grid Size Example

Usage

Como você pode ver na demonstração acima, o fornece IgrGrid 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);
}

<IgrGrid id="grid" className="gridSize">
</IgrGrid>

E agora vamos ver em detalhes como cada opção reflete no IgrGrid componente. Quando você alterna entre diferentes opções de tamanho, a altura de cada IgrGrid 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 IgrGrid 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:

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

Agora podemos adicionar a marcação.

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

Finalmente, vamos fornecer a lógica necessária para realmente aplicar o tamanho:

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

Outra opção que IgrGrid fornece para você, para poder alterar a altura das linhas no IgrGrid, é a propriedade rowHeight. Então, vamos ver em ação como essa propriedade afeta o IgrGrid 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 IgrGrid:

<IgrGrid id="grid" className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering="true">
</IgrGrid>

API References

• IgrGrid
• IgrColumn

Additional Resources

• Virtualização e desempenho
• Edição
• Paginação
• Filtragem
• Classificação
• Resumos
• Fixação de coluna
• Redimensionamento de colunas
• Escolha
• Procurando

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for React Forums
• Ignite UI for React GitHub