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 o IgxActionStripModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxActionStripComponent como uma dependência autônoma ou usar o token IGX_ACTION_STRIP_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

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

    Agora que você importou o módulo Ignite UI for Angular Action Strip ou as diretivas, você pode começar com uma configuração básica do componente igx-action-strip.

    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>

    Por padrão, a Action Strip estará visível, mas isso pode ser configurado por meio da propriedade hidden @Input.

    Para cenários onde mais de três itens de ação serão mostrados, é melhor usar a diretiva IgxActionStripMenuItem. Qualquer item dentro da Action Strip marcado com a diretiva estrutural *igxActionStripMenuItem será mostrado em um menu suspenso, revelado ao alternar o botão mais, ou seja, os três pontos que representam a última ação.

    <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

    A mesma instância do Action Strip pode ser usada em vários lugares no documento, desde que as ações não precisem ser visíveis simultaneamente para elas. O Action Strip pode alterar seu contêiner pai, o que é possível alterando o context. A melhor maneira de fazer isso é por meio do método da API show e passando o context como um argumento. O context deve ser uma instância de um componente e deve ter uma propriedade element acessível do tipo ElementRef.

    Note

    O método da API show usa Angular Renderer2 para anexar a Action Strip a esse 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- inclui funcionalidade e UI relacionadas à edição de grade. Ele permite que você alterne rapidamente o modo de edição para células ou linhas, dependendo do valor da opção rowEditable da grade e se a exclusão de linhas é permitida.
    • IgxGridPinningActionsComponent- inclui funcionalidade e UI relacionadas à fixação de linhas de grade. Ele permite que você fixe linhas rapidamente e navegue entre linhas fixadas e suas contrapartes desabilitadas.
    <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

    Esses componentes herdam IgxGridActionsBaseDirective e, ao criar um componente de ação de grade personalizado, ele também deve herdar IgxGridActionsBaseDirective.

    Note

    Quando IgxActionStripComponent é um componente filho da grade, passar o mouse sobre uma linha mostrará automaticamente a IU.

    Note

    Mais informações sobre como usar o ActionStrip no componente de grade podem ser encontradas aqui.

    Estilização

    Para personalizar a Action Strip, primeiro você precisa importar o arquivo index, onde todas as funções de estilo e mixins estão localizados.

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

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

    Em seguida, temos que criar um novo tema que estenda o action-strip-theme e passar os parâmetros que gostaríamos de alterar:

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

    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.