React Tamanho da grade hierárquica

O recurso Ignite UI for React Tamanho em React Hierarchical Grid permite que os usuários controlem o espaçamento e o layout dos dados dentro doIgrHierarchicalGrid. Ao mudar--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 Hierarchical Grid Size Example

Usage

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

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

<IgrHierarchicalGrid className="gridSize"></IgrHierarchicalGrid>

E agora vamos ver em detalhes como cada opção reflete oIgrHierarchicalGrid componente. Quando você alterna entre diferentes opções de tamanho, a altura de cadaIgrHierarchicalGrid elemento e os acolchoamentos correspondentes serão alterados. Além disso, se quiser aplicar colunaswidth personalizadas, considere que ela deve ser maior do que a soma do preenchimento à esquerda e à direita:

Grande- Este é o tamanho padrãoIgrHierarchicalGrid com o menor intenso e a altura da linha iguais a50px. Os acolchoamentos à esquerda e à direita são24px: Colunawidth mínima é80px;
Médio- Este é o tamanho médio intenso com40px altura de fileira. Os acolchoamentos à esquerda e à direita são16px: Colunawidth mínima é64px;
Pequeno- este é o tamanho com maior intensidade e32px altura de fileira. Os acolchoamentos à esquerda e à direita são12px: Colunawidth mínima é56px;

Note

Please keep in mind that currently you can not override any of the sizes.

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

<IgrPropertyEditorPanel
    ref={propertyEditorRef}
    componentRenderer={renderer}
    target={grid}
    descriptionType="WebHierarchicalGrid"
    isHorizontal={true}
    isWrappingEnabled={true}>
    <IgrPropertyEditorPropertyDescription
        name="SizeEditor"
        label="Grid Size:"
        valueType="EnumValue"
        dropDownNames={["Small", "Medium", "Large"]}
        dropDownValues={["Small", "Medium", "Large"]}
        changed={webGridSetGridSize}>
    </IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>

Agora podemos adicionar a marcação.

<IgrHierarchicalGrid
    autoGenerate={false}
    ref={grid}
    allowFiltering={true}>
    <IgrColumn field="CustomerID" dataType="string"></IgrColumn>
    <IgrColumn field="CompanyName" dataType="string"></IgrColumn>
    <IgrColumn field="ContactName" dataType="string"></IgrColumn>
    <IgrColumn field="Address" dataType="string"></IgrColumn>
    <IgrColumn field="City" dataType="string"></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string"></IgrColumn>
    <IgrColumn field="Country" dataType="string"></IgrColumn>
    <IgrColumn field="Phone" dataType="string"></IgrColumn>
    <IgrColumn field="Fax" dataType="string"></IgrColumn>

    <IgrRowIsland childDataKey="Orders" autoGenerate={false}>
        <IgrColumn field="OrderID" dataType="number"></IgrColumn>
        <IgrColumn field="EmployeeID" dataType="number"></IgrColumn>
        <IgrColumn field="OrderDate" dataType="date"></IgrColumn>
        <IgrColumn field="RequiredDate" dataType="date"></IgrColumn>
        <IgrColumn field="ShippedDate" dataType="date"></IgrColumn>
        <IgrColumn field="ShipVia" dataType="number"></IgrColumn>
        <IgrColumn field="Freight" dataType="number"></IgrColumn>
        <IgrColumn field="ShipName" dataType="string"></IgrColumn>
        <IgrColumn field="ShipAddress" dataType="string"></IgrColumn>
        <IgrColumn field="ShipCity" dataType="string"></IgrColumn>
        <IgrColumn field="ShipPostalCode" dataType="string"></IgrColumn>
        <IgrColumn field="ShipCountry" dataType="string"></IgrColumn>

        <IgrRowIsland childDataKey="OrderDetails" autoGenerate={false}>
            <IgrColumn field="ProductID" dataType="number"></IgrColumn>
            <IgrColumn field="UnitPrice" dataType="number"></IgrColumn>
            <IgrColumn field="Quantity" dataType="number"></IgrColumn>
            <IgrColumn field="Discount" dataType="number"></IgrColumn>
        </IgrRowIsland>
    </IgrRowIsland>
</IgrHierarchicalGrid>

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: IgrHierarchicalGrid
private gridRef(r: IgrHierarchicalGrid) {
    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 queIgrHierarchicalGrid permite mudar a altura das fileirasIgrHierarchicalGrid é a propriedaderowHeight. Então, vamos ver em ação como essa propriedade afeta oIgrHierarchicalGrid layout junto com o--ig-size.

Lembre-se do seguinte:

--ig-sizeA variável CSS não terá impacto na altura da linha se forrowHeight especificada.
--ig-sizeafetará todos os demais elementos da Grade Hierárquica, como foi descrito acima.

Agora podemos estender nossa amostra e adicionarrowHeight propriedades aoIgrHierarchicalGrid:

<IgrHierarchicalGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrHierarchicalGrid>

API References

Nossa comunidade é ativa e sempre acolhedora para novas ideias.