Blazor Toolbar Overview

    El componente Blazor barra de herramientas es un contenedor complementario para las operaciones de la interfaz de usuario que se usará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará dinámicamente con un ajuste preestablecido de propiedades y elementos de herramienta cuando se vincule a nuestros IgbDataChart componentes o IgbCategoryChart. Podrá crear herramientas personalizadas para su proyecto, lo que permitirá a los usuarios finales proporcionar cambios, ofreciendo una cantidad infinita de personalización.

    Ejemplo de barra de herramientas Blazor

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    dependencias

    Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

    @using IgniteUI.Blazor.Controls
    razor

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbToolbar componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor

    Uso

    Acciones de herramienta

    La siguiente es una lista de los diferentes elementos IgbToolAction que puede agregar a la barra de herramientas.

    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.

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Integración Gráfico de datos Blazor

    La barra de herramientas Blazor contiene una Target propiedad. Esto se utiliza para vincular un componente, como se IgbDataChart muestra en el código a continuación:

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

    Varios elementos y menús IgbToolAction preexistentes se vuelven disponibles cuando IgbDataChart se vincula con la barra de herramientas. Aquí hay una lista de las acciones de herramientas IgbDataChart integradas Blazor y su OverlayId asociado:

    Acciones de zoom

    Acciones de tendencia

    • AnalyzeMenu: un IgbToolActionIconMenu 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: una IgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor máximo de la serie.
        • MinValue: una IgbToolActionCheckbox que muestra una línea horizontal discontinua a lo largo del eje y en el valor mínimo de la serie.
        • Average: una IgbToolActionCheckbox 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 trazado IgbDataChart.
    • HelpersHeader: encabezado de una subsección.
    • SeriesAvg: una IgbToolActionCheckbox que agrega o elimina un IgbValueLayer a la colección de series del gráfico usando ValueLayerValueMode de tipo Average.
    • ValueLabelsMenu: Un submenú que contiene varias herramientas para mostrar diferentes anotaciones en el IgbDataChart área de la trama.
    • ShowCrosshairs: una IgbToolActionCheckbox que alterna las anotaciones en forma de cruz al pasar el mouse a través de la propiedad CrosshairsDisplayMode del gráfico.
    • ShowGridlines: una IgbToolActionCheckbox que alterna líneas de cuadrícula adicionales aplicando un MajorStroke al eje X.

    Acción Guardar en imagen

    • CopyAsImage: A IgbToolActionLabel que expone una opción para copiar el gráfico en el portapapeles.
    • CopyHeader: Un encabezado de subsección.

    Iconos SVG

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

    Orientación vertical

    De forma predeterminada, la barra de herramientas Blazor se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente estableciendo la Orientation propiedad.

    <IgbToolbar Orientation="ToolbarOrientation.Vertical" />
    razor

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

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    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>
    razor

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

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales