Descripción general de la barra de herramientas de Web Components

    The Web Components Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our IgcDataChartComponent or IgcCategoryChartComponent components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

    Web Components Toolbar Example

    Dependencies

    Instale los Ignite UI for Web Components diseños, entradas, gráficos y paquetes principales:

    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 para usar elIgcToolbarComponent con elIgcDataChartComponent componente 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

    A continuación se muestra una lista de los diferentesIgcToolActionComponent elementos que puedes añadir a la barra de herramientas.

    Cada una de estas herramientas expone unOnCommand evento que se activa con un clic del ratón. Ten en cuenta que elIgcToolActionIconMenuComponent es un envoltorio para otras herramientas que también puede envolverse dentro de unIgcToolActionIconMenuComponent​

    Las herramientas nuevas y existentes pueden reposicionarse y marcarse como ocultas usando lasoverlayId​beforeId propiedades yafterId delIgcToolActionComponent objeto. ToolActions también revela unavisibility propiedad.

    El siguiente ejemplo muestra un par de características. Primero, puedes agrupar herramientas en elIgcToolActionSubPanelComponent que también ocultar herramientas integradas como las acciones de menú ZoomReset y AnalyzeMenu. En este ejemplo, una nueva instancia de la herramienta ZoomReset actúa dentro del menú ZoomMenu, usando laafterId propiedad y asignándola a ZoomOut para que sea preciso su ubicación. También se resalta mediante laisHighlighted propiedad de la herramienta.

    Web Components Data Chart Integration

    The Web Components Toolbar contains a Target property. This is used to link a component, such as the IgcDataChartComponent as shown in the code below:

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

    Several pre-existing IgcToolActionComponent items and menus become available when the IgcDataChartComponent is linked with the Toolbar. Here is a list of the built-in Web Components IgcDataChartComponent Tool Actions and their associated overlayId:

    Acciones de zoom

    Acciones de tendencia

    Acción Guardar en imagen

    • CopyAsImage: AIgcToolActionLabelComponent que expone una opción para copiar la carta al portapapeles.
    • CopyHeader: Un encabezado de subsección.

    SVG Icons

    Al añadir herramientas manualmente, se pueden asignar iconos usando elRenderIconFromText método. Hay tres parámetros que hay que cumplir con 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 añadir la cadena SVG.

    Data URL Icons

    De forma similar a añadir svg, también puedes añadir una imagen de icono desde una URL a través de elregisterIconFromDataURL. El tercer parámetro del método se usaría para introducir una URL de cadena.

    En el siguiente fragmento de código se muestran ambos métodos para agregar un icono.

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

}

    Vertical Orientation

    By default the Web Components Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the orientation property.

    <igc-toolbar orientation="Vertical" />

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

    Color Editor

    Puede agregar una herramienta de editor de color personalizada a la barra de herramientas Web Components, que también funcionará con el evento Command para realizar un estilo personalizado en la aplicación.

    <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>

    En el ejemplo siguiente se muestra el estilo del pincel de la serie Web Components Gráfico de datos con la herramienta Editor de color.

    API References

    Additional Resources