Angular Action Strip 지시어 개요

    Ignite UI for Angular 사용자 상호 작용(예: 호버) 시 추가 UI 및 기능이 특정 대상 컨테이너 위에 표시될 수 있도록 하나 이상의 작업이 포함된 오버레이 영역을 제공합니다. 액션 스트립이 컨테이너를 오버레이하려고 시도할 때 컨테이너는 상대적으로 배치되어야 하며 자체적으로 절대적으로 배치됩니다. 액션 스트립에 의해 겹쳐졌음에도 불구하고 주요 상호 작용과 대상 컨테이너에 대한 사용자 액세스는 계속 사용 가능합니다.

    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';
// 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, 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 {}

    이제 Ignite UI for Angular 가져왔으므로 igx-action-strip 구성 요소의 기본 구성으로 시작할 수 있습니다.

    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>

    기본적으로 액션 스트립은 표시되지만 hidden @Input 속성을 통해 구성할 수 있습니다.

    3개 이상의 작업 항목이 표시되는 시나리오의 경우 IgxActionStripMenuItem 지시어를 사용하는 것이 가장 좋습니다. *igxActionStripMenuItem 구조 지시문으로 표시된 액션 스트립 내의 모든 항목은 드롭다운에 표시되며, 더보기 버튼을 전환하면 표시됩니다. 즉, 마지막 액션을 나타내는 세 개의 점입니다.

    <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

    작업이 동시에 표시될 필요가 없는 한 동일한 작업 스트립 인스턴스를 문서의 여러 위치에서 사용할 수 있습니다. 액션 스트립은 상위 컨테이너를 변경할 수 있으며 이는 context 변경하여 가능합니다. 이를 수행하는 가장 좋은 방법은 show API 메소드를 통해 context를 인수로 전달하는 것입니다. context 구성 요소의 인스턴스여야 하며 ElementRef 유형의 액세스 가능한 element 속성을 가지고 있어야 합니다.

    Note

    ​show API 메소드는 Angular Renderer2를 사용하여 해당 element에 액션 스트립을 추가합니다.

    Usage in Grids

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

    • IgxGridEditingActionsComponent- 그리드 편집과 관련된 기능 및 UI가 포함되어 있습니다. 그리드의 rowEditable 옵션 값과 행 삭제 허용 여부에 따라 셀이나 행의 편집 모드를 빠르게 전환할 수 있습니다.
    • IgxGridPinningActionsComponent- 그리드 행 고정과 관련된 기능 및 UI를 포함합니다. 이를 통해 행을 빠르게 고정하고 고정된 행과 비활성화된 행 사이를 탐색할 수 있습니다.
    <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

    이러한 구성 요소는 IgxGridActionsBaseDirective 상속하며 사용자 정의 그리드 작업 구성 요소를 생성할 때 IgxGridActionsBaseDirective도 상속해야 합니다.

    Note

    ​IgxActionStripComponent 그리드의 하위 구성요소인 경우 행에 마우스를 올리면 자동으로 UI가 표시됩니다.

    Note

    그리드 구성 요소에서 ActionStrip을 사용하는 방법에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

    스타일링

    액션 스트립을 사용자 정의하려면 먼저 모든 스타일링 기능과 믹스인이 있는 index 파일을 가져와야 합니다.

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

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

    다음으로 action-strip-theme 확장하고 변경하려는 매개변수를 전달하는 새 테마를 만들어야 합니다.

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

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

    ​$legacy-support​ ​false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.

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

    ​$legacy-support​ ​true로 설정된 경우 다음과 같은 구성 요소 테마를 포함합니다.

    @include action-strip($custom-strip);

    Known Issues and Limitations

    • IE11에서 Action Strip 구성 요소를 사용하려면 각도 애플리케이션의 polyfill.ts에서 배열 폴리필을 명시적으로 가져와야 합니다.

      import 'core-js/es7/array';

    API and Style References

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

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

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

    Theming Dependencies

    Additional Resources

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