Descripción general de la barra de herramientas Web Components

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

    Web Components Toolbar Example

    Dependencies

    Instale la Ignite UI for Web Components:

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

    Los siguientes módulos son necesarios cuando se utiliza IgcToolbarComponent con el componente IgcDataChartComponent y sus características.

    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

    La siguiente es una lista de los diferentes elementos IgcToolActionComponent 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 IgcToolActionComponent. 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.

    Web Components Data Chart Integration

    La barra de herramientas Web Components contiene una propiedad Target. Esto se utiliza para vincular un componente, como IgcDataChartComponent, como se muestra en el siguiente código:

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

    Varios elementos y menús IgcToolActionComponent preexistentes pasan a estar disponibles cuando IgcDataChartComponent se vincula con la barra de herramientas. Aquí hay una lista de las acciones de la herramienta IgcDataChartComponent Web Components integrados y su overlayId asociado:

    Acciones de zoom

    Acciones de tendencia

    Acción Guardar en imagen

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

    SVG Icons

    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.

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

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

    Vertical Orientation

    De forma predeterminada, la barra de herramientas Web Components se muestra horizontalmente, pero también tiene la capacidad de mostrarse verticalmente configurando la propiedad orientation.

    <igc-toolbar orientation="Vertical" />

    En el ejemplo siguiente se muestra la orientación vertical de la barra de herramientas de Web Components.

    API References

    Additional Resources