Descripción general de la directiva de franja de acción Angular

    El componente Ignite UI for Angular Action Strip proporciona un área de superposición que contiene una o más acciones, lo que permite que la interfaz de usuario y la funcionalidad adicionales se muestren en la parte superior de un contenedor de destino específico tras la interacción del usuario, por ejemplo, al pasar el puntero. El contenedor debe colocarse relativamente como la tira de acción intenta superponerlo y se coloca en una posición absoluta. A pesar de estar superpuestas por una tira de acciones, las interacciones principales y el acceso del usuario al contenedor de destino siguen estando disponibles.

    Ejemplo de tira de acción Angular

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

    Primeros pasos con Ignite UI for Angular Action Strip

    Para empezar a utilizar el componente Ignite UI for Angular Action Strip, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular
    cmd

    Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxActionStripModule en su archivo app.module.ts.

    // app.module.ts
    
    ...
    import { IgxActionStripModule } from 'igniteui-angular';
    // import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        imports: [..., IgxActionStripModule],
        ...
    })
    export class AppModule {}
    typescript

    Alternativamente, a partir de 16.0.0, puede importar IgxActionStripComponent como una dependencia independiente o usar el token IGX_ACTION_STRIP_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts
    
    ...
    import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from 'igniteui-angular';
    // import { IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
    
    @Component({
        selector: 'app-home',
        template: `
        <div style="width:100px; height:100px;">
            <igx-action-strip>
                <button igxButton (click)="makeTextBold()">
                    <igx-icon>format_bold</igx-icon>
                </button>
            </igx-action-strip>
        <div>
        `,
        styleUrls: ['home.component.scss'],
        standalone: true,
        imports: [IGX_ACTION_STRIP_DIRECTIVES, IgxButtonDirective, IgxIconComponent]
        /* or imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent] */
    })
    export class HomeComponent {}
    typescript

    Ahora que ha importado el módulo o las directivas Ignite UI for Angular Action Strip, puede comenzar con una configuración básica del igx-action-strip componente.

    Uso del componente Angular tira de acciones

    Para inicializar y colocar la Action Strip correctamente, debe estar dentro de un contenedor relativamente posicionado:

    <div style="position:relative; width:100px; height:100px;">
      <igx-action-strip>
        <button igxButton (click)="makeTextBold()">
          <igx-icon>format_bold</igx-icon>
        </button>
      </igx-action-strip>
    </div>
    html

    De forma predeterminada, la Action Strip será visible, pero esto se puede configurar mediante la propiedad hidden @Input.

    Para escenarios donde se mostrarán más de tres elementos de acción, es mejor usar la directiva IgxActionStripMenuItem. Cualquier elemento dentro de Action Strip marcado con la directiva estructural *igxActionStripMenuItem se mostrará en un menú desplegable, que se revelará al alternar el botón más, es decir, los tres puntos que representan la última acción.

    <div style="position:relative; width:100px; height:100px;">
      <igx-action-strip>
        <button *igxActionStripMenuItem igxButton (click)="alignTextLeft()">
          <igx-icon>format_align_left</igx-icon>
        </button>
        <button *igxActionStripMenuItem igxButton (click)="alignTextCenter()">
          <igx-icon>format_align_center</igx-icon>
        </button>
        <button *igxActionStripMenuItem igxButton (click)="alignTextRight()">
          <igx-icon>format_align_right</igx-icon>
        </button>
      </igx-action-strip>
    </div>
    html

    EXAMPLE
    TS
    HTML
    SCSS

    Reutilizar la tira de acción

    La misma instancia de Action Strip se puede utilizar en varios lugares del documento siempre que las acciones no tengan que ser visibles simultáneamente para ellos. Action Strip puede cambiar su contenedor principal, lo cual es posible cambiando el context. La mejor manera de hacerlo es mediante el método show API y pasando el context como argumento. El context debe ser una instancia de un componente y debe tener una propiedad element accesible del tipo ElementRef.

    El show método de API usa Angular Renderer2 para anexar la tira de acciones a eso element.

    Uso en cuadrículas

    Action Strip proporciona funcionalidad y interfaz de usuario adicionales para IgxGrid. Esto se puede utilizar a través de componentes de acción de cuadrícula y proporcionamos dos predeterminados:

    • IgxGridEditingActionsComponent: incluye funcionalidad y interfaz de usuario relacionadas con la edición de cuadrículas. Le permite alternar rápidamente el modo de edición para celdas o filas, según el valor de la opción rowEditable de la cuadrícula y si se permite eliminar filas.
    • IgxGridPinningActionsComponent: incluye funcionalidad y interfaz de usuario relacionadas con la fijación de filas de la cuadrícula. Le permite fijar filas rápidamente y navegar entre filas fijadas y sus contrapartes deshabilitadas.
    <igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
      <igx-column *ngFor="let c of columns" [field]="c.field"> </igx-column>
    
      <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
      </igx-action-strip>
    </igx-grid>
    html

    Estos componentes heredan IgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredar IgxGridActionsBaseDirective.

    Cuando IgxActionStripComponent es un componente secundario de la cuadrícula, al pasar el cursor sobre una fila se mostrará automáticamente la interfaz de usuario.

    EXAMPLE
    TS
    HTML
    SCSS

    Puede encontrar más información sobre cómo utilizar ActionStrip en el componente de cuadrícula aquí.

    App Builder | CTA Banner

    Estilo

    Para personalizar Action Strip, primero debe importar el archivo index, donde se encuentran todas las funciones de estilo y mixins.

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    A continuación, tenemos que crear un nuevo tema que extienda el action-strip-theme y pasar los parámetros que nos gustaría cambiar:

    $custom-strip: action-strip-theme(
      $background: rgba(150, 133, 143, 0.4),
      $actions-background: rgba(109, 121, 147, 0.6),
      $icon-color: null,
      $delete-action: null,
      $actions-border-radius: 0,
    );
    scss

    El último paso es incluir el tema del componente recién creado en nuestra aplicación.

    @include css-vars($custom-strip);
    scss

    EXAMPLE
    TS
    HTML
    SCSS

    API y referencias de estilo

    Para obtener información más detallada sobre la API Action Strip, consulte los siguientes enlaces:

    Los siguientes estilos CSS integrados nos ayudaron a lograr este diseño de Action Strip:

    Componentes y/o directivas adicionales que se pueden utilizar dentro de Action Strip:

    Dependencias temáticas

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.