Angular Toolbar Overview

    El componente de barra de herramientas Angular es un contenedor complementario para operaciones de interfaz de usuario que se utilizará principalmente con nuestros componentes de gráficos. La barra de herramientas se actualizará de forma dinámica con un conjunto preestablecido de propiedades y elementos de herramientas cuando se vincule con nuestros componentes IgxDataChartComponent o IgxCategoryChartComponent. Podrá crear herramientas personalizadas para su proyecto, lo que permitirá a los usuarios finales realizar cambios y ofrecer una cantidad infinita de opciones de personalización.

    Ejemplo de barra de herramientas Angular

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    dependencias

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

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

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

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

    Uso

    Acciones de herramienta

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

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Integración Angular Gráfico de datos

    La barra de herramientas Angular contiene una propiedad Target. Esta se utiliza para vincular un componente, como IgxDataChartComponent, como se muestra en el código siguiente:

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

    Varios elementos y menús preexistentes IgxToolActionComponent se vuelven disponibles cuando IgxDataChartComponent se vincula con la barra de herramientas. Aquí hay una lista de las acciones de herramienta integradas Angular IgxDataChartComponent y su overlayId asociado:

    Acciones de zoom

    Acciones de tendencia

    Acción Guardar en imagen

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

    Iconos SVG

    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.

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

    Orientación vertical

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

    <igx-toolbar orientation="Vertical" />
    html

    El siguiente ejemplo demuestra la orientación vertical de la barra de herramientas Angular.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Color Editor

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

    <igx-toolbar
      name="toolbar"
      #toolbar>
          <igx-tool-action-color-editor
          title="Series Brush"
          name="colorEditorTool"
          #colorEditorTool>
          </igx-tool-action-color-editor>
    </igx-toolbar>
    html
    <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>
    ts

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

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Referencias de API

    App Builder | CTA Banner

    Recursos adicionales