React Tamanho da grade hierárquica
O recurso Tamanho Ignite UI for React em React Grade Hierárquica permite que os usuários controlem o espaçamento e o layout dos dados dentro do IgrHierarchicalGrid
. 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 Hierarchical Grid Size Example
Usage
Como você pode ver na demonstração acima, o fornece IgrHierarchicalGrid
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);
}
<IgrHierarchicalGrid className="gridSize"></IgrHierarchicalGrid>
E agora vamos ver em detalhes como cada opção reflete no IgrHierarchicalGrid
componente. Quando você alterna entre diferentes opções de tamanho, a altura de cada IgrHierarchicalGrid
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
IgrHierarchicalGrid
com o menor intenso e altura de linha igual a50px
. Os preenchimentos esquerdo e direito são24px
; A colunawidth
mínima é80px
; - Médio- Este é o tamanho médio intenso com
40px
altura da linha. Os preenchimentos esquerdo e direito são16px
; A colunawidth
mínima é64px
; - Pequeno- Este é o tamanho com maior intensidade e
32px
altura de linha. Os preenchimentos esquerdo e direito são12px
; A colunawidth
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="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 que IgrHierarchicalGrid
fornece para você, para poder alterar a altura das linhas no IgrHierarchicalGrid
, é a propriedade rowHeight
. Então, vamos ver em ação como essa propriedade afeta o IgrHierarchicalGrid
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 forrowHeight
especificada.--ig-size
afetará todos os demais elementos da Grade Hierárquica, conforme descrito acima.
Agora podemos estender nosso exemplo e adicionar rowHeight
propriedade ao IgrHierarchicalGrid
:
<IgrHierarchicalGrid className="gridSize" rowHeight="80px" width="100%" height="550px" allowFiltering={true}></IgrHierarchicalGrid>
API References
Nossa comunidade é ativa e sempre acolhedora para novas ideias.