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

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

    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 não será visível, mas isso pode ser configurado via ahidden propriedade @Input.

    Para cenários em que mais de três itens de ação serão mostrados, é melhor usarIgxActionStripMenuItem diretiva. Qualquer item dentro da Fita de Ação marcado com a*igxActionStripMenuItem diretriz estrutural será mostrado em um menu suspenso, revelado ao ativar 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 pontos do documento, desde que as ações não precisem ser visíveis simultaneamente para elas. A Action Strip pode mudar seu contêiner-pai, o que é possível ao mudar ocontext. A melhor forma de fazer isso é usando oshow método API e passando ocontext como um argumento. Devecontext ser uma instância de um componente e deve ter uma propriedade acessívelelement do tipoElementRef.

    Note

    Oshow método API usa Angular Renderer2 para adicionar a Action Strip a eleelement.

    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 funcionalidades e interface relacionadas à edição em grade. Ele permite alternar rapidamente o modo de edição para células ou linhas, dependendo do valor darowEditable opção da grade e se é permitido deletar linhas.
    • IgxGridPinningActionsComponent- inclui funcionalidades e interface relacionadas ao fixação de linhas de grade. Ele permite que você rapidamente fixe as linhas e navegue entre as fileiras fixadas e suas contrapartes desativadas.
    <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 herdamIgxGridActionsBaseDirective e, ao criar um componente de ação de grade personalizado, ele também deve herdarIgxGridActionsBaseDirective.

    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

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

    @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, precisamos criar um novo tema que estenda eaction-strip-theme passe os parâmetros que gostaríamos de mudar:

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