Blazor Toolbar Overview

O componente Blazor Barra de Ferramentas é um contêiner companheiro para operações de interface a serem usados principalmente com nossos componentes de gráficos. A barra de ferramentas será atualizada dinamicamente com um pré-definido de propriedades e itens da ferramenta quando vinculada aos nossosIgbDataChart componentes ouIgbCategoryChart OR. Você poderá criar ferramentas personalizadas para seu projeto, permitindo que os usuários finais faç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 seguintes módulos são necessários ao usar oIgbToolbar com oIgbDataChart componente e suas funcionalidades.

// 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 aoIgbToolbar componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

Usage

Tool Actions

A seguir está uma lista dos diferentesIgbToolAction itens que você pode adicionar à Barra de Ferramentas.

• IgbToolActionButton
• IgbToolActionCheckbox
• IgbToolActionIconButton
• IgbToolActionIconMenu
• IgbToolActionLabel
• IgbToolActionNumberInput
• IgbToolActionRadio
• IgbToolActionSubPanel

Cada uma dessas ferramentas expõe umOnCommand evento que é acionado por um clique do mouse. Note que oIgbToolActionIconMenu é um wrapper para outras ferramentas que também pode ser envolvido dentro de umIgbToolActionIconMenu.

Ferramentas novas e existentes podem ser reposicionadas e marcadas como ocultas usando asOverlayId​BeforeId propriedades eAfterId noIgbToolAction objeto. As ToolActions também expõem umaVisibility propriedade.

O exemplo a seguir demonstra algumas características. Primeiro, você pode agrupar ferramentasIgbToolActionSubPanel em conjunto incluindo ocultar ferramentas integradas, como as ações do menu ZoomReset e AnalyzeMenu. Neste exemplo, uma nova instância da ferramenta ZoomReset é acionada dentro do ZoomMenu, usando aAfterId propriedade e atribuindo isso ao ZoomOut para ser preciso em sua posição. Também é destacado pelaIsHighlighted propriedade na ferramenta.

Blazor Data Chart Integration

A barra de ferramentas Blazor contém umaTarget propriedade. Isso é usado para vincular um componente, comoIgbDataChart 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é-existentesIgbToolAction ficam disponíveis quando elesIgbDataChart são vinculados à Barra de Ferramentas. Aqui está uma lista das Ações BlazorIgbDataChart Ferramentas integradas e suas associadasOverlayId:

Ações de zoom

• ZoomMenu: AIgbToolActionIconMenu que expõe trêsIgbToolActionLabel itens para invocar osZoomIn métodos eZoomOut no gráfico para aumentar/diminuir o nível de zoom do gráfico, incluindoZoomReset, aIgbToolActionLabel que invoca oResetZoom método no gráfico para redefinir o nível de zoom para sua posição padrão.

Ações de tendência

• AnalyzeMenu: AIgbToolActionIconMenu 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 seguintes três ferramentas:
    • MaxValue: AIgbToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y no valor máximo da série.
    • MinValue: AIgbToolActionCheckbox que exibe uma linha horizontal tracejada ao longo do eixo y, no valor mínimo da série.
    • Average: AIgbToolActionCheckbox 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 àIgbDataChart área do gráfico.
  • TrendsHeader: Um cabeçalho de seção de submenu para as seguintes três ferramentas:
    • Exponencial: AIgbToolActionRadio que define oTrendLineType em cada série do gráfico para ExponentialFit.
    • Linear: AIgbToolActionRadio que define oTrendLineType em cada série do gráfico como LinearFit.
    • Logarítmico: AIgbToolActionRadio que define oTrendLineType em cada série do gráfico para LogarítmicoAjuste.
• HelpersHeader: Um cabeçalho de subseção.
  • SeriesAvg: AIgbToolActionCheckbox que adiciona ou remove aIgbValueLayer à coleção de séries do gráfico usando oValueLayerValueMode tipoAverage de .
  • ValueLabelsMenu: Um submenu contendo várias ferramentas para mostrar diferentes anotações naIgbDataChart área do enredo.
  • ValueLabelsHeader: Um cabeçalho de seção de submenu para as seguintes ferramentas:
    • ShowValueLabels: AIgbToolActionCheckbox que alterna entre os valores dos pontos de dados usando aIgbCalloutLayer.
    • ShowLastValueLabel: AIgbToolActionCheckbox que alterna as anotações do eixo de valores finais usando aIgbFinalValueLayer.
• ShowCrosshairs: AIgbToolActionCheckbox que alterna o mouse sobre as anotações da mira via propriedade doCrosshairsDisplayMode gráfico.
• ShowGridlines: AIgbToolActionCheckbox que alterna linhas de grade extras aplicando aMajorStroke ao eixo X.

Ação Salvar na imagem

• CopyAsImage: AIgbToolActionLabel que expõe uma opção para copiar o gráfico para a prancheta.
• CopyHeader: Um cabeçalho de subseção.

SVG Icons

Ao adicionar ferramentas manualmente, ícones podem ser atribuídos usando oRenderIconFromText método. Existem três parâmetros a serem aprovados nesse 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 exemploIconName, seguido pela adição da string SVG.

Data URL Icons

De forma semelhante à adição do svg, você também pode adicionar uma imagem de ícone a partir de uma URL via oRegisterIconFromDataURL. O terceiro parâmetro do método seria usado para inserir uma URL de string.

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

    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 padrão, a barra de ferramentas Blazor é mostrada horizontalmente, mas também tem a capacidade de ser exibida verticalmente ao definir aOrientation 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

• IgbToolbar
• IgbDataChart

Additional Resources

• Ignite UI for Blazor Fóruns
• Ignite UI for Blazor GitHub