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

    Ahora que tienes importados el módulo o directivas de Ignite UI for Angular Action Strip, puedes empezar con una configuración básica deligx-action-strip componente.

    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>

    Por defecto, la Action Strip no será visible, pero esto se puede configurar mediante lahidden propiedad @Input.

    Para escenarios en los que se muestren más de tres elementos de acción, es mejor usarIgxActionStripMenuItem directiva. Cualquier objeto dentro de la Tira de Acción marcado con la*igxActionStripMenuItem directiva estructural se mostrará en un desplegable, revelado al activar 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 puede usarse en varios lugares del documento siempre que las acciones no tengan que ser visibles simultáneamente para ellas. La Action Strip puede cambiar su contenedor padre, lo cual es posible cambiando elcontext. La mejor manera de hacerlo es mediante elshow método API y pasando elcontext como argumento. Debecontext ser una instancia de un componente y debe tener una propiedad accesibleelement delElementRef tipo.

    Note

    Elshow método API utiliza Angular Renderer2 para añadir la Action Strip a esaelement plataforma.

    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 e interfaz de usuario relacionadas con la edición en cuadrícula. Permite cambiar rápidamente el modo de edición para celdas o filas, dependiendo del valor de larowEditable opción de la cuadrícula y de si está permitido eliminar filas.
    • IgxGridPinningActionsComponent- incluye funcionalidad e interfaz de usuario relacionadas con el fijamiento de filas de cuadrícula. Te permite fijar filas rápidamente y navegar entre filas fijadas y sus equivalentes deshabilitados.
    <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 heredanIgxGridActionsBaseDirective y, al crear un componente de acción de cuadrícula personalizado, también debe heredarIgxGridActionsBaseDirective.

    Note

    CuandoIgxActionStripComponent es un componente hijo de la cuadrija, al pasar el cursor por una fila se muestra automáticamente la interfaz.

    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

    Para personalizar la Action Strip, primero tienes que importar elindex archivo, donde están todas las funciones de estilo y mezclas.

    @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 yaction-strip-theme pase los parámetros que queremos cambiar:

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