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

이제 Ignite UI for Angular Action Strip 모듈이나 디렉티브를 가져왔으니, 컴포넌트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>

기본적으로 액션 스트립은 보이지 않지만, @Input 속성을 통해hidden 설정할 수 있습니다.

세 가지 이상의 액션 항목이 표시되는 상황에서는 지시를 사용하는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 함으로써 가능합니다. 가장 좋은 방법은 API 메서드를 통해show 인context 수로 전달하는 것입니다. 는context 컴포넌트의 인스턴스여야 하며, 해당element 타입의 접근 가능한ElementRef 속성을 가져야 합니다.

Note

API 메서드는show Angular Renderer2를 사용해 Action Stripelement을 추가합니다.

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을 사용하는 방법에 대한 자세한 내용은 Grid Row Actions 문서에서 확인할 수 있습니다.

스타일링

액션 스트립을 커스터마이즈하려면 먼저 모든 스타일링 기능과 믹싱이 있는 파일을 가져와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(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에 대한 자세한 내용은 다음 링크를 참조하세요.

IgxActionStripComponent API

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

IgxActionStripComponent Styles

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

Theming Dependencies

Additional Resources

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

Angular 액션 스트립 지침 개요

Angular Action Strip Example

Getting Started with Ignite UI for Angular Action Strip

Using the Angular Action Strip Component

Menu look and feel

Reusing the Action Strip

Note

Usage in Grids

Note

Note

Note

스타일링

API and Style References

Theming Dependencies

Additional Resources

테마