Blazor Toolbar Overview
El componente Blazor Toolbar es un contenedor complementario para las operaciones de la interfaz de usuario que se utilizará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un ajuste preestablecido de propiedades y elementos de herramientas cuando se vincule a nuestros componentes IgbDataChart
o IgbCategoryChart
. Podrá crear herramientas personalizadas para su proyecto que permitirán a los usuarios finales realizar cambios, ofreciendo una cantidad infinita de personalización.
Blazor Toolbar Example
Dependencies
Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:
@using IgniteUI.Blazor.Controls
Los siguientes módulos son necesarios cuando se utiliza IgbToolbar
con el componente IgbDataChart
y sus características.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(
typeof(IgbToolbarModule),
typeof(IgbDataChartToolbarModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartCategoryTrendLineModule)
);
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbToolbar
. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Usage
Tool Actions
La siguiente es una lista de los diferentes elementos IgbToolAction
que puede agregar a la barra de herramientas.
IgbToolActionButton
IgbToolActionCheckbox
IgbToolActionIconButton
IgbToolActionIconMenu
IgbToolActionLabel
IgbToolActionNumberInput
IgbToolActionRadio
Cada una de estas herramientas expone un evento OnCommand
que se activa al hacer clic con el mouse.
Las herramientas nuevas y existentes se pueden reposicionar y marcar como ocultas usando las propiedades OverlayId
, BeforeId
y AfterId
en el objeto IgbToolAction
. ToolActions también expone una propiedad Visibility
.
El siguiente ejemplo demuestra cómo ocultar las acciones de las herramientas de menú integradas ZoomReset y AnalyzeMenu. Se agrega una nueva instancia de la acción de la herramienta ZoomReset y se coloca dentro de ZoomMenu usando la propiedad AfterId
y asignándola a ZoomOut. Esto asegurará que la nueva herramienta Restablecer se muestre en la parte inferior del ZoomMenu.
Blazor Data Chart Integration
La barra de herramientas Blazor contiene una propiedad Target
. Esto se utiliza para vincular un componente, como IgbDataChart
, como se muestra en el siguiente código:
<IgbToolbar
Name="Toolbar"
@ref="toolbar"
Target="@chart">
<IgbToolbar>
<IgbDataChart
Name="chart"
@ref="chart">
</IgbDataChart>
Varios elementos y menús IgbToolAction
preexistentes quedan disponibles cuando IgbDataChart
se vincula con la barra de herramientas. Aquí hay una lista de las acciones integradas de la herramienta Blazor IgbDataChart
y su OverlayId
asociado:
Acciones de zoom
ZoomReset
: unIgbToolActionLabel
que invoca el métodoResetZoom
en el gráfico para restablecer el nivel de zoom a su posición predeterminada.ZoomMenu
: unIgbToolActionIconMenu
que expone dos elementosIgbToolActionLabel
para invocar los métodosZoomIn
yZoomOut
en el gráfico para aumentar/disminuir el nivel de zoom del gráfico.
Acciones de tendencia
AnalyzeMenu
: unIgbToolActionIconMenu
que contiene varias opciones para configurar diferentes opciones del gráfico.AnalyzeHeader
: encabezado de una subsección.LinesMenu
: un submenú que contiene varias herramientas para mostrar diferentes líneas horizontales discontinuas en el gráfico.LinesHeader
: encabezado de sección del submenú para las siguientes tres herramientas:MaxValue
: unaIgbToolActionCheckbox
que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.MinValue
: unaIgbToolActionCheckbox
que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.Average
: unaIgbToolActionCheckbox
que muestra una línea horizontal discontinua a lo largo del eje y en el valor promedio de la serie.
TrendsMenu
: un submenú que contiene herramientas para aplicar varias líneas de tendencia al área de trazadoIgbDataChart
.TrendsHeader
: encabezado de sección de submenú para las siguientes tres herramientas:- Exponencial: A
IgbToolActionRadio
que establece elTrendLineType
en cada serie del gráfico en ExponentialFit. - Lineal: A
IgbToolActionRadio
que establece elTrendLineType
en cada serie del gráfico en LinearFit. - Logarítmico: A
IgbToolActionRadio
que establece elTrendLineType
en cada serie del gráfico en LogarithmicFit.
- Exponencial: A
HelpersHeader
: encabezado de una subsección.SeriesAvg
: unaIgbToolActionCheckbox
que agrega o elimina unIgbValueLayer
a la colección de series del gráfico usandoValueLayerValueMode
de tipoAverage
.ValueLabelsMenu
: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones en elIgbDataChart
área de la trama.ValueLabelsHeader
: encabezado de sección del submenú para las siguientes herramientas:ShowValueLabels
: unIgbToolActionCheckbox
que alterna valores de puntos de datos mediante el uso deIgbCalloutLayer
.ShowLastValueLabel
: unIgbToolActionCheckbox
que alterna las anotaciones del eje del valor final mediante el uso de unIgbFinalValueLayer
.
ShowCrosshairs
: unaIgbToolActionCheckbox
que alterna las anotaciones en forma de cruz al pasar el mouse a través de la propiedadCrosshairsDisplayMode
del gráfico.ShowGridlines
: unaIgbToolActionCheckbox
que alterna líneas de cuadrícula adicionales aplicando unMajorStroke
al eje X.
Acción Guardar en imagen
CopyAsImage
: AIgbToolActionLabel
que expone una opción para copiar el gráfico en el portapapeles.CopyHeader
: Un encabezado de subsección.
SVG Icons
Al agregar herramientas manualmente, los iconos se pueden asignar mediante el RenderIconFromText
método. Hay tres parámetros que se deben pasar en este método. El primero es el nombre de la colección de iconos definido en la herramienta, por ejemplo. IconCollectionName
El segundo es el nombre del icono definido en la herramienta, por ejemplo IconName
, seguido de la adición de la cadena SVG.
<IgbToolActionLabel
Title="Custom Icon"
IconName="CustomIcon"
IconCollectionName="CustomCollection">
</IgbToolActionLabel>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var toolbar = this.toolbar;
if (firstRender) {
this.ToolbarCustomIconOnViewInit();
}
}
private IgbToolbar toolbar;
public void ToolbarCustomIconOnViewInit()
{
this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
{
string icon =
@"
<svg width=""28px"" height=""28px"" stroke=""none"" viewBox=""0 0 3.5 3.5"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" aria-hidden=""true"" role=""img"" class=""iconify iconify--gis"" preserveAspectRatio=""xMidYMid meet""><path d=""M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z"" fill=""#000000"" fill-rule=""evenodd""/></svg>
";
this.toolbar.RegisterIconFromTextAsync("CustomCollection", "CustomIcon", icon);
}));
}
}
Vertical Orientation
De forma predeterminada, la barra de herramientas Blazor se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente configurando la propiedad Orientation
.
<IgbToolbar Orientation="ToolbarOrientation.Vertical" />
En el ejemplo siguiente se muestra la orientación vertical de la barra de herramientas Blazor.