Angular 액션 스트립 지침 개요

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

Angular 액션 스트립 예

EXAMPLE

Ignite UI for Angular 액션 스트립 시작하기

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

ng add igniteui-angular
cmd

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

또는 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 {}
typescript

이제 Ignite UI for Angular Action Strip 모듈 또는 지시문을 가져왔으므로 구성 요소의 기본 구성 igx-action-strip부터 시작할 수 있습니다.

Angular 액션 스트립 컴포넌트 사용

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

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

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

메뉴 모양과 느낌

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

EXAMPLE

액션 스트립 재사용

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

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

그리드에서의 사용법

액션 스트립은 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>
html

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

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

EXAMPLE

그리드 구성 요소에서 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';
scss

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

$custom-strip: action-strip-theme(
  $background: rgba(109, 121, 147, 0.2),
  $actions-background: rgba(#011627, 0.9),
  $actions-border-radius: 0
);
scss

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

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

EXAMPLE

API 및 스타일 참조

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

• IgxActionStripComponent API

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

• IgxActionStripComponent Styles

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

• IgxGridActionsBaseDirective
• IgxGridPinningActionsComponent
• IgxGridEditingActionsComponent
• IgxDividerDirective

테마 종속성

• IgxButton 테마
• IgxRipple 테마
• IgxDropDown 테마
• IgxIcon 테마

추가 리소스

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

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular