Angular Toolbar Overview

    O componente Angular 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 nossosIgxDataChartComponent componentes ouIgxCategoryChartComponent 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.

    Angular Toolbar Example

    Dependencies

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

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

    Os seguintes módulos são necessários ao usar oIgxToolbarComponent com oIgxDataChartComponent componente e suas funcionalidades.

    import { IgxToolbarModule } from 'igniteui-angular-layouts';
import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxToolbarModule,
        IgxDataChartToolbarModule,
        IgxDataChartCoreModule,
        IgxDataChartCategoryModule,
        IgxDataChartAnnotationModule,
        IgxDataChartInteractivityModule,
        IgxDataChartCategoryTrendLineModule
        // ...
    ]
})
export class AppModule {}

    import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();

    Usage

    Tool Actions

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

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

    Ferramentas novas e existentes podem ser reposicionadas e marcadas como ocultas usando asoverlayId​beforeId propriedades eafterId noIgxToolActionComponent objeto. As ToolActions também expõem umavisibility propriedade.

    O exemplo a seguir demonstra algumas características. Primeiro, você pode agrupar ferramentasIgxToolActionSubPanelComponent 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.

    Angular Data Chart Integration

    A barra de ferramentas Angular contém umaTarget propriedade. Isso é usado para vincular um componente, comoIgxDataChartComponent mostrado no código abaixo:

      <div class="legend">
    <igx-toolbar
      name="toolbar"
      [target]="chart"
      #toolbar>
    </igx-toolbar>
  </div>
  <div class="container fill">
    <igx-data-chart
    name="chart"
    #chart>
  </igx-data-chart>

    Vários itens e menus pré-existentesIgxToolActionComponent ficam disponíveis quando elesIgxDataChartComponent são vinculados à Barra de Ferramentas. Aqui está uma lista das Ações AngularIgxDataChartComponent Ferramentas integradas e suas associadasoverlayId:

    Ações de zoom

    Ações de tendência

    Ação Salvar na imagem

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

    <igx-tool-action-label
    title="Custom Icon"
    iconName="CustomIcon"
    iconCollectionName="CustomCollection">
</igx-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");

}

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

}

    Vertical Orientation

    Por padrão, a barra de ferramentas Angular é mostrada horizontalmente, mas também tem a capacidade de ser exibida verticalmente ao definir aorientation propriedade.

    <igx-toolbar orientation="Vertical" />

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

    Editor de cores

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

    <igx-toolbar
  name="toolbar"
  #toolbar>
      <igx-tool-action-color-editor
      title="Series Brush"
      name="colorEditorTool"
      #colorEditorTool>
      </igx-tool-action-color-editor>
</igx-toolbar>

    <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 Angular com a ferramenta Editor de Cores.

    API References

    Additional Resources