Visão geral da barra de ferramentas do Web Components

    O componente Barra de ferramentas do Web Components é 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 IgcDataChartComponent componentes ou IgcCategoryChartComponent 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.

    Web Components Toolbar Example

    Dependencies

    Instale os Ignite UI for Web Components layouts, entradas, gráficos e pacotes principais:

    npm install igniteui-webcomponents-layouts
npm install igniteui-webcomponents-inputs
npm install igniteui-webcomponents-charts
npm install igniteui-webcomponents-core

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

    import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcToolbarModule } from 'igniteui-webcomponents-layouts';
import { IgcDataChartToolbarModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartAnnotationModule, IgcDataChartInteractivityModule, IgcDataChartCategoryTrendLineModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcToolbarModule,
    IgcToolActionLabelModule,
    IgcDataChartToolbarModule,
    IgcDataChartCategoryModule,
    IgcDataChartCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule,
    IgcDataChartCategoryTrendLineModule
);

    Usage

    Tool Actions

    Veja a seguir uma lista dos diferentes IgcToolActionComponent 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 IgcToolActionIconMenuComponent é um invólucro para outras ferramentas que também podem ser agrupadas dentro de um IgcToolActionIconMenuComponent.

    Ferramentas novas e existentes podem ser reposicionadas e marcadas como ocultas usando as overlayId propriedades , beforeId and afterId no IgcToolActionComponent objeto. ToolActions também expõem uma visibility propriedade.

    O exemplo a seguir demonstra alguns recursos. Primeiro, IgcToolActionSubPanelComponent 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.

    Web Components Data Chart Integration

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

      <div>
      <igc-toolbar
      name="Toolbar"
      id="Toolbar">
      </igc-toolbar>
  </div>

  <div class="container fill">
      <igc-data-chart
      is-horizontal-zoom-enabled="true"
      name="chart"
      id="chart">
      </igc-data-chart>
  </div>

      private _bind: () => void;
  constructor() {
    var toolbar = this.toolbar = document.getElementById('Toolbar') as IgcToolbarComponent;
    var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;

    this._bind = () => {
        toolbar.target = this.chart;
    }
    this._bind();
  }

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

    Ações de zoom

    Ações de tendência

    Ação Salvar na imagem

    • CopyAsImage: A IgcToolActionLabelComponent 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.

    public toolbarCustomIconOnViewInit(): void {

  const 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.registerIconFromText("CustomCollection", "CustomIcon", icon);
}

    public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}

    <igc-tool-action-label
    title="Custom Icon"
    icon-name="CustomIcon"
    icon-collection-name="CustomCollection">
</igc-tool-action-label>

    public toolbarCustomIconOnViewInit(): void {

  const 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.registerIconFromText("CustomCollection", "CustomIcon", icon);

}

    public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}

    @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 Web Components é mostrada horizontalmente, mas também tem a capacidade de ser mostrada verticalmente definindo a orientation propriedade.

    <igc-toolbar orientation="Vertical" />

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

    Editor de cores

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

    <igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>

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

    API References

    Additional Resources