Blazor Toolbar Overview

    O componente Barra de ferramentas do Blazor é um contêiner complementar para operações de interface do usuário a serem usadas principalmente com nossos componentes de gráficos. A barra de ferramentas será atualizada dinamicamente com uma predefinição de propriedades e itens de ferramenta quando vinculada aos nossos IgbDataChart componentes ou IgbCategoryChart componentes. Você poderá criar ferramentas personalizadas para o seu projeto, permitindo que os usuários finais forneçam alterações, oferecendo uma quantidade infinita de personalização.

    Blazor Toolbar Example

    Dependencies

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

    @using IgniteUI.Blazor.Controls

    Os módulos a seguir são necessários ao usar o IgbToolbar com o IgbDataChart componente e seus recursos.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbToolbarModule),
    typeof(IgbDataChartToolbarModule),
    typeof(IgbDataChartCoreModule),
    typeof(IgbDataChartCategoryModule),
    typeof(IgbDataChartAnnotationModule),
    typeof(IgbDataChartInteractivityModule),
    typeof(IgbDataChartCategoryTrendLineModule)
);

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao IgbToolbar componente. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto de Assembly da Web do Blazor ou no arquivo Pages/_Host.cshtml em um projeto do Blazor Server:

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

    Usage

    Tool Actions

    Veja a seguir uma lista dos diferentes IgbToolAction itens que você pode adicionar à barra de ferramentas.

    Cada uma dessas ferramentas expõe um OnCommand evento que é acionado pelo clique do mouse. Observe que o IgbToolActionIconMenu é um invólucro para outras ferramentas que também podem ser agrupadas dentro de um IgbToolActionIconMenu.

    Ferramentas novas e existentes podem ser reposicionadas e marcadas como ocultas usando as OverlayId propriedades , BeforeId and AfterId no IgbToolAction objeto. ToolActions também expõem uma Visibility propriedade.

    O exemplo a seguir demonstra alguns recursos. Primeiro, IgbToolActionSubPanel você pode agrupar ferramentas no incluindo ocultação de ferramentas internas, como as ações de ferramenta de menu ZoomReset e AnalyzeMenu. Neste exemplo, uma nova instância da ação da ferramenta ZoomReset é adicionada e colocada no ZoomMenu usando a propriedade the e atribuindo-a AfterId a ZoomOut. Também é destacado por meio da IsHighlighted propriedade na ferramenta. Isso garantirá que a nova ferramenta Redefinir seja exibida imediatamente na parte inferior do ZoomMenu.

    Blazor Data Chart Integration

    A barra de ferramentas Blazor contém uma Target propriedade. Isso é usado para vincular um componente, como o IgbDataChart mostrado no código abaixo:

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

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

    Vários itens e menus pré-existentes IgbToolAction ficam disponíveis quando o IgbDataChart está vinculado à barra de ferramentas. Aqui está uma lista das ações internas da ferramenta Blazor IgbDataChart e suas associadas OverlayId:

    Ações de zoom

    Ações de tendência

    • AnalyzeMenu: Um IgbToolActionIconMenu que contém várias opções para configurar diferentes opções do gráfico.
    • AnalyzeHeader: Um cabeçalho de subseção.
    • LinesMenu: Um submenu contendo várias ferramentas para mostrar diferentes linhas horizontais tracejadas no gráfico.
      • LinesHeader: Um cabeçalho de seção de submenu para as três ferramentas a seguir:
        • MaxValue: A IgbToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y no valor máximo da série.
        • MinValue: A IgbToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y no valor mínimo da série.
        • Average: A IgbToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y no valor médio da série.
    • TrendsMenu: Um submenu contendo ferramentas para aplicar várias linhas de tendência à área de IgbDataChart plotagem.
    • HelpersHeader: Um cabeçalho de subseção.
    • SeriesAvg: A IgbToolActionCheckbox que adiciona ou remove a IgbValueLayer à coleção de séries do gráfico usando o ValueLayerValueMode tipo Average of.
    • ValueLabelsMenu: Um submenu contendo várias ferramentas para mostrar diferentes anotações na IgbDataChart área de plotagem.
    • ShowCrosshairs: Um IgbToolActionCheckbox que alterna as anotações de mira do mouse por meio da propriedade do CrosshairsDisplayMode gráfico.
    • ShowGridlines: A IgbToolActionCheckbox que alterna linhas de grade extras aplicando a MajorStroke ao eixo X.

    Ação Salvar na imagem

    • CopyAsImage: A IgbToolActionLabel que expõe uma opção para copiar o gráfico para a área de transferência.
    • CopyHeader: Um cabeçalho de subseção.

    SVG Icons

    Ao adicionar ferramentas manualmente, os ícones podem ser atribuídos usando o RenderIconFromText método. Existem três parâmetros a serem aprovados neste método. O primeiro é o nome da coleção de ícones definido na ferramenta, por exemplo. IconCollectionName O segundo é o nome do ícone definido na ferramenta, por exemplo IconName, seguido pela adição da string SVG.

    Data URL Icons

    Da mesma forma que adicionar svg, você também pode adicionar uma imagem de ícone de um URL por meio do RegisterIconFromDataURL. O terceiro parâmetro do método seria usado para inserir uma URL de cadeia de caracteres.

    O snippet a seguir mostra os dois métodos de adição de um ícone.

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

}

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

    }

    
```tsx
<IgrToolbar orientation="Vertical" />

    Vertical Orientation

    Por padrão, a barra de ferramentas Blazor é mostrada horizontalmente, mas também tem a capacidade de ser mostrada verticalmente definindo a Orientation propriedade.

    <IgbToolbar Orientation="ToolbarOrientation.Vertical" />

    O exemplo a seguir demonstra a orientação vertical da barra de ferramentas Blazor.

    Editor de cores

    Você pode adicionar uma ferramenta de edição de cores personalizada à barra de ferramentas Blazor, que também funcionará com o evento Command para executar um estilo personalizado em seu aplicativo.

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

    O exemplo a seguir demonstra o estilo do pincel da série Gráfico de Dados do Blazor com a ferramenta Editor de Cores.

    API References

    Additional Resources