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.

    Angular Action Strip Example

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

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

    El siguiente paso es importarlosIgxActionStripModule en tu archivo app.module.ts.

    // app.module.ts

...
import { IgxActionStripModule } from 'igniteui-angular/action-strip';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxActionStripModule],
    ...
})
export class AppModule {}

    Alternativamente,16.0.0 puedes importarlosIgxActionStripComponent como una dependencia independiente, o usar elIGX_ACTION_STRIP_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

...
import { IGX_ACTION_STRIP_DIRECTIVES } from 'igniteui-angular/action-strip';
import { IgxButtonDirective } from 'igniteui-angular/button';
import { IgxIconComponent } from 'igniteui-angular/icon';
// 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 {}

    Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the igx-action-strip component.

    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>

    By default, the Action Strip will not be visible, but this can be configured via the hidden @Input property.

    For scenarios where more than three action items will be shown, it is best to use IgxActionStripMenuItem directive. Any item within the Action Strip marked with the *igxActionStripMenuItem structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action.

    <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

    The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them. The Action Strip can change its parent container, which is possible by changing the context. The best way to do so is via the show API method and passing the context as an argument. The context should be an instance of a component and should have an accessible element property of the ElementRef type.

    Note

    The show API method uses Angular Renderer2 to append the Action Strip to that 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 - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the rowEditable option of the grid and whether deleting rows is allowed.
    • IgxGridPinningActionsComponent - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts.
    <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

    These components inherit IgxGridActionsBaseDirective and when creating a custom grid action component, it should also inherit IgxGridActionsBaseDirective.

    Note

    When IgxActionStripComponent is a child component of the grid, hovering a row will automatically show the UI.

    Note

    Más información sobre cómo usar ActionStrip en el componente grid se puede encontrar en la documentación de Acciones de Fila de Cuadrícula.

    Estilismo

    To customize the Action Strip, you first need to import the index file, where all styling functions and mixins are located.

    @use "igniteui-angular/theming" as *;

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

    Next, we have to create a new theme that extends the action-strip-theme and pass the parameters which we'd like to change:

    $custom-strip: action-strip-theme(
  $background: rgba(109, 121, 147, 0.2),
  $actions-background: rgba(#011627, 0.9),
  $actions-border-radius: 0
);

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

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

    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.