Angular 액션 스트립 지침 개요

    Ignite UI for Angular Action Strip 구성 요소는 하나 이상의 작업을 포함하는 오버레이 영역을 제공하여 사용자 상호 작용(예: 호버링) 시 특정 대상 컨테이너 위에 추가 UI 및 기능을 표시할 수 있습니다. 컨테이너는 Action Strip이 오버레이를 시도할 때 상대적으로 배치되어야 하며 그 자체로 절대적으로 배치됩니다. Action Strip에 의해 겹쳐지더라도 대상 컨테이너에 대한 기본 상호 작용 및 사용자 액세스는 계속 사용할 수 있습니다.

    Angular Action Strip Example

    Getting Started with Ignite UI for Angular Action Strip

    Ignite UI for Angular Action Strip 구성 요소를 시작하려면 먼저 Ignite UI for Angular를 설치해야 합니다. 기존 Angular 응용 프로그램에서 다음 명령을 입력합니다.

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

    다음 단계는 다음 단계를 가져오는 것입니다.IgxActionStripModule 당신의 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 {}

    또는16.0.0 독립 실행형 의존성으로 가져오IgxActionStripComponent 거나, 토큰을IGX_ACTION_STRIP_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

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

    액션 스트립을 올바르게 초기화하고 배치하려면 상대적으로 배치된 컨테이너 내부에 있어야 합니다.

    <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

    액션 스트립은 IgxGrid에 대한 추가 기능과 UI를 제공합니다. 이는 그리드 액션 구성 요소를 통해 활용될 수 있으며 우리는 두 가지 기본 구성 요소를 제공합니다.

    • 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

    그리드의 자식 구성 요소가 있을 때IgxActionStripComponent, 행을 올리면 자동으로 UI가 표시됩니다.

    Note

    그리드 컴포넌트에서 ActionStrip을 사용하는 방법에 대한 자세한 내용은 Grid Row Actions 문서에서 확인할 수 있습니다.

    스타일링

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

    마지막 단계는 새로 생성된 구성 요소 테마를 애플리케이션에 포함시키는 것입니다.

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

    API and Style References

    Action Strip API에 대한 자세한 내용은 다음 링크를 참조하세요.

    다음 내장 CSS 스타일은 이 액션 스트립 레이아웃을 구현하는 데 도움이 되었습니다.

    액션 스트립 내에서 사용할 수 있는 추가 구성요소 및/또는 지시어:

    Theming Dependencies

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.