Blazor Toolbar Overview

    El componente Blazor Toolbar es un contenedor complementario para las operaciones de la interfaz de usuario que se usarán principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un preajuste de propiedades y elementos de la herramienta cuando esté vinculada a nuestrosIgbDataChart componentes.IgbCategoryChart Podrás crear herramientas personalizadas para tu proyecto que permitan 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 para usar elIgbToolbar con elIgbDataChart componente 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 tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbToolbar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor 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

    A continuación se muestra una lista de los diferentesIgbToolAction elementos que puedes añadir a la barra de herramientas.

    Cada una de estas herramientas expone unOnCommand evento que se activa con un clic del ratón. Ten en cuenta que elIgbToolActionIconMenu es un envoltorio para otras herramientas que también puede envolverse dentro de unIgbToolActionIconMenu​

    Las herramientas nuevas y existentes pueden reposicionarse y marcarse como ocultas usando lasOverlayId​BeforeId propiedades yAfterId delIgbToolAction objeto. ToolActions también revela unaVisibility propiedad.

    El siguiente ejemplo muestra un par de características. Primero, puedes agrupar herramientas en elIgbToolActionSubPanel que también ocultar herramientas integradas como las acciones de menú ZoomReset y AnalyzeMenu. En este ejemplo, una nueva instancia de la herramienta ZoomReset actúa dentro del menú ZoomMenu, usando laAfterId propiedad y asignándola a ZoomOut para que sea preciso su ubicación. También se resalta mediante laIsHighlighted propiedad de la herramienta.

    Blazor Data Chart Integration

    La barra de herramientas Blazor contiene unaTarget propiedad. Esto se utiliza para enlazar un componente, como seIgbDataChart muestra en el código siguiente:

      <IgbToolbar
    Name="Toolbar"
    @ref="toolbar"
    Target="@chart">
  <IgbToolbar>

  <IgbDataChart
    Name="chart"
    @ref="chart">
  </IgbDataChart>

    Varios elementos y menús preexistentesIgbToolAction quedan disponibles cuando seIgbDataChart vincula con la barra de herramientas. Aquí tienes una lista de las acciones de BlazorIgbDataChart de herramienta integradas y sus asociadasOverlayId:

    Acciones de zoom

    Acciones de tendencia

    • AnalyzeMenu: AIgbToolActionIconMenu que contiene varias opciones para configurar diferentes opciones del gráfico.
    • AnalyzeHeader: Un encabezado de subsección.
      • LinesMenu: Un submenú que contiene varias herramientas para mostrar diferentes líneas horizontales discontinuas en el gráfico.
      • LinesHeader: Un encabezado de sección de submenú para las siguientes tres herramientas:
        • MaxValue: AIgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
        • MinValue: AIgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
        • Average: AIgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor medio de la serie.
      • TrendsMenu: Un submenú que contiene herramientas para aplicar diversas líneas de tendencia alIgbDataChart área del gráfico.
      • TrendsHeader: Un encabezado de sección de submenú para las siguientes tres herramientas:
    • HelpersHeader: Un encabezado de subsección.
      • SeriesAvg: AIgbToolActionCheckbox que añade o elimina aIgbValueLayer a la colección de series del gráfico usando elValueLayerValueMode tipoAverage de .
      • ValueLabelsMenu: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones enIgbDataChart el área de la gráfica.
      • ValueLabelsHeader: Un encabezado de sección de submenú para las siguientes herramientas:
    • ShowCrosshairs: AIgbToolActionCheckbox que alterna el ratón sobre las anotaciones de la mira mediante la propiedad delCrosshairsDisplayMode gráfico.
    • ShowGridlines: AIgbToolActionCheckbox que alterna líneas de rejilla adicionales aplicando aMajorStroke al eje X.

    Acción Guardar en imagen

    • CopyAsImage: AIgbToolActionLabel que expone una opción para copiar la carta al portapapeles.
    • CopyHeader: Un encabezado de subsección.

    SVG Icons

    Al añadir herramientas manualmente, se pueden asignar iconos usando elRenderIconFromText método. Hay tres parámetros que hay que cumplir con 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 añadir la cadena SVG.

    Data URL Icons

    De forma similar a añadir svg, también puedes añadir una imagen de icono desde una URL a través de elRegisterIconFromDataURL. El tercer parámetro del método se usaría para introducir una URL de cadena.

    En el siguiente fragmento de código se muestran ambos métodos para agregar un icono.

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

    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) =>
      {
            this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
      }));
    }
}

    Vertical Orientation

    Por defecto, la barra de herramientas Blazor se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente configurando laOrientation propiedad.

    <IgbToolbar Orientation="ToolbarOrientation.Vertical" />

    El siguiente ejemplo demuestra la orientación vertical de la barra de herramientas Blazor.

    Color Editor

    Puede agregar una herramienta de editor de color personalizada a la barra de herramientas Blazor, que también funcionará con el evento Command para realizar un estilo personalizado en la aplicación.

    <IgbToolbar
Name="toolbar"
@ref="toolbar">
    <IgbToolActionColorEditor
    Title="Series Brush">
    </IgbToolActionColorEditor>
</IgbToolbar>

    En el ejemplo siguiente se muestra el estilo del pincel de la serie Blazor Gráfico de datos con la herramienta Editor de color.

    API References

    Additional Resources