Blazor Grid Size
La función Tamaño de Ignite UI for Blazor en Blazor cuadrícula permite a los usuarios controlar el espaciado y el diseño de los datos dentro de la IgbGrid
. Al cambiar--ig-size
, puede mejorar significativamente la experiencia del usuario al interactuar con grandes cantidades de contenido. Pueden elegir entre tres opciones de tamaño:
--ig-size-large
--ig-size-medium
--ig-size-small
Blazor Grid Size Example
Usage
Como puede ver en la demostración anterior, ofrece IgbGrid
tres opciones de tamaño: pequeño, mediano y grande. El siguiente fragmento de código muestra cómo establecer--ig-size
en línea o parte de una clase CSS:
.gridSize {
--ig-size: var(--ig-size-medium);
}
<IgbGrid Class="gridSize" Data=northwindEmployees @ref=grid>
</IgbGrid>
Y ahora veamos en detalle cómo se refleja cada opción en el IgbGrid
componente. Al cambiar entre diferentes opciones de tamaño, se cambiará la altura de cada IgbGrid
elemento y los rellenos correspondientes. Además, si desea aplicar una columna Width
personalizada, tenga en cuenta el hecho de que debe ser más grande que la suma del relleno izquierdo y derecho.
- large: este es el tamaño predeterminado
IgbGrid
con la intensidad más baja y la altura de fila igual a50px
. Los acolchados izquierdo y derecho son24px
; La columnaWidth
mínima es80px
; - Medio: este es el tamaño medio intenso con
40px
la altura de la fila. Los acolchados izquierdo y derecho son16px
; La columnaWidth
mínima es64px
; - Pequeño: este es el tamaño con mayor intensidad y
32px
altura de fila. Los acolchados izquierdo y derecho son12px
; La columnaWidth
mínima es56px
;
[!Note] Please keep in mind that currently you can not override any of the sizes.
Continuemos ahora con nuestro ejemplo y veamos en acción cómo se aplica el--ig-size
. Primero agreguemos un botón que nos ayudará a cambiar entre cada tamaño:
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebGrid"
IsHorizontal="true"
IsWrappingEnabled="true"
Name="PropertyEditor"
@ref="propertyEditor">
<IgbPropertyEditorPropertyDescription
Name="SizeEditor"
@ref="sizeEditor"
Label="Grid Size:"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
ChangedScript="WebGridSetGridSize">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
Ahora podemos agregar el marcado.
<div class="container vertical">
<div class="container vertical fill">
<IgbGrid
AutoGenerate="false"
Data="InvoicesData"
AllowFiltering="true"
Id="grid"
Name="grid"
@ref="grid">
<IgbColumn Field="CustomerName" Header="Customer Name" Sortable="true" HasSummary="true" DataType="GridColumnDataType.String"></IgbColumn>
<IgbColumn Field="Country" Header="Country" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="City" Header="City" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="Address" Header="Address" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="PostalCode" Header="Postal Code" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="Salesperson" Header="Sales Person" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="ShipperName" Header="Shipper Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="OrderDate" Header="Order Date" DataType="GridColumnDataType.Date" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="ProductID" Header="ID" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="ProductName" Header="Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Number" Sortable="true" HasSummary="true" Filterable="false"></IgbColumn>
<IgbColumn Field="Quantity" Header="Quantity" DataType="GridColumnDataType.Number" Sortable="true" HasSummary="true" Filterable="false"></IgbColumn>
<IgbColumn Field="Discontinued" Header="Discontinued" DataType="GridColumnDataType.Boolean" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="Discontinued" Header="Discontinued" DataType="GridColumnDataType.Boolean" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="ShipName" Header="Name" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="ShipCountry" Header="Country" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"> </IgbColumn>
<IgbColumn Field="ShipCity" Header="City" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
<IgbColumn Field="ShipPostalCode" Header="Postal Code" DataType="GridColumnDataType.String" Sortable="true" HasSummary="true"></IgbColumn>
</IgbGrid>
</div>
</div>
Finalmente, proporcionemos la lógica necesaria para aplicar realmente el tamaño:
@code {
*** In JavaScript ***
igRegisterScript("WebGridSetGridSize", (sender, evtArgs) => {
var newVal = evtArgs.newValue.toLowerCase();
var grid = document.getElementById("grid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}, false);
}
Otra opción que IgbGrid
le proporciona, para poder cambiar la altura de las filas en el IgbGrid
, es la propiedad RowHeight
. Así que veamos en acción cómo esta propiedad afecta el IgbGrid
diseño junto con el--ig-size
.
Por favor tenga en cuenta lo siguiente:
--ig-size
La variable CSS no tendrá ningún impacto en la altura de la fila si seRowHeight
especifica.--ig-size
afectará a todos los demás elementos de la cuadrícula, como se ha descrito anteriormente.
Ahora podemos ampliar nuestro ejemplo y agregar la propiedad RowHeight
a IgbGrid
:
<IgbGrid
@ref="grid"
Id="grid"
Class="gridSize"
Width="100%"
Height="100%"
AutoGenerate="true"
Data="northwindEmployees"
RowHeight="rowHeight">
</IgbGrid>
@code {
private string rowHeight = "80px";
}
API References
Additional Resources
- Virtualización y rendimiento
- Edición
- Paginación
- Filtración
- Clasificación
- resúmenes
- Fijación de columnas
- Cambio de tamaño de columna
- Selección
- buscando
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.