Descripción general de la directiva Angular Action Strip

    El componente Ignite UI for Angular Action Strip proporciona un área de superposición que contiene una o más acciones que permiten mostrar una interfaz de usuario y funcionalidad adicionales en la parte superior de un contenedor de destino específico al interactuar el usuario, por ejemplo, al pasar el mouse. El contenedor debe colocarse relativamente, ya que la Action Strip intenta superponerse a él y, a su vez, está posicionado de manera absoluta. A pesar de estar superpuestas por una Action Strip, las principales interacciones y el acceso de los usuarios al contenedor de destino siguen estando disponibles.

    Ejemplo de tira de acción Angular

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

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

    Introducción a Ignite UI for Angular Action Strip

    Para comenzar con 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 a la 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 la Ignite UI for Angular Action Strip, puede comenzar con una configuración básica del componente igx-action-strip.

    Uso del componente Angular Action Strip

    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
    MODULES
    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 método show API utiliza Angular Renderer2 para agregar Action Strip a ese 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
    MODULES
    TS
    HTML
    SCSS

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

    App Builder | Banner de llamada a la acción

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