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.

    Angular Action Strip Example

    Getting Started with 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

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

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

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

    Using the Angular Action Strip Component

    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>

    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>

    Reusing the Action Strip

    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.

    Note

    El método show API utiliza Angular Renderer2 para agregar Action Strip a ese element.

    Usage in Grids

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

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

    Note

    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.

    Note

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

    Estilismo

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

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

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

    Cuando $legacy-support se establece en false (predeterminado), incluya las variables CSS del componente como esta:

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

    Cuando $legacy-support se establece en true, incluya el tema del componente de esta manera:

    @include action-strip($custom-strip);

    Known Issues and Limitations

    • El uso del componente Action Strip en IE11 requiere la importación explícita de la matriz polyfill en polyfill.ts de la aplicación angular.

      import 'core-js/es7/array';

    API and Style References

    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:

    Theming Dependencies

    Additional Resources

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