Visão geral da diretiva de faixa de ação Angular

    O componente Ignite UI for Angular Action Strip fornece uma área de sobreposição contendo uma ou mais ações, permitindo que UI e funcionalidade adicionais sejam mostradas em cima de um contêiner de destino específico mediante interação do usuário, por exemplo, passar o mouse. O contêiner deve ser posicionado relativamente, pois a Action Strip tenta sobrepô-lo e é ele próprio posicionado de forma absoluta. Apesar de sobrepostos por uma Action Strip, as principais interações e o acesso do usuário ao contêiner de destino permanecem disponíveis.

    Angular Action Strip Example

    Getting Started with Ignite UI for Angular Action Strip

    Para começar a usar o componente Action Strip do Ignite UI for Angular, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar issoIgxActionStripModule no seu arquivo 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 você pode importarIgxActionStripComponent como uma dependência independente ou usar oIGX_ACTION_STRIP_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

    // 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 e posicionar a Action Strip corretamente, ela precisa estar dentro de um contêiner 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

    A Action Strip fornece funcionalidade e UI adicionais para o IgxGrid. Isso pode ser utilizado por meio de componentes de ação de grade e estamos fornecendo dois padrões:

    • 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

    QuandoIgxActionStripComponent for um componente filho da grade, passar o mouse por uma linha mostrará automaticamente a interface.

    Note

    Mais informações sobre como usar o ActionStrip no componente grid podem ser encontradas na documentação de Ações de Linha da Grade.

    Estilização

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

    O último passo é incluir o tema do componente recém-criado em nosso aplicativo.

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

    API and Style References

    Para obter informações mais detalhadas sobre a API Action Strip, consulte os seguintes links:

    Os seguintes estilos CSS integrados nos ajudaram a obter este layout da Action Strip:

    Componentes e/ou diretivas adicionais que podem ser usados dentro da Action Strip:

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.