Angular 확장 패널 구성요소 개요

    Ignite UI for Angular 개발자에게 가장 유용하고 사용하기 쉬운 레이아웃 구성 요소 중 하나인 확장 패널을 제공합니다. 이 풍부한 기능의 구성 요소는 확장 가능/축소 가능한 상세 요약 보기를 생성하는 데 사용됩니다. 콘텐츠에는 Angular 확장 패널 애니메이션, 텍스트, 아이콘, 헤더, 작업 표시줄 및 기타 요소가 포함될 수 있습니다.

    Ignite UI 확장 패널 igx-expansion-panel은 축소 또는 확장의 두 가지 상태로 렌더링할 수 있는 경량 Angular 아코디언 구성 요소입니다. Angular의 확장 패널은 마우스 클릭이나 키보드 상호 작용을 사용하여 전환할 수 있습니다. 여러 Angular 확장 패널을 Angular 아코디언으로 결합할 수도 있습니다.

    Angular Expansion Panel Example

    우리는 Ignite UI Angular 사용하여 이 간단한 Angular 확장 패널 예제를 만들었습니다. 샘플이 어떻게 작동하는지 확인하세요.

    Getting Started with Ignite UI for Angular Expansion Panel

    Ignite UI for Angular Drop Down 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

    Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

    다음 단계는 IgxExpansionPanelModule 당신의 app.module.ts 파일.

    // app.module.ts
...
import { IgxExpansionPanelModule } from 'igniteui-angular';
// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxExpansionPanelModule],
    ...
})
export class AppModule {}

    또는 16.0.0부터 IgxExpansionPanelComponent 독립 실행형 종속성으로 가져오거나 IGX_EXPANSION_PANEL_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.

    // home.component.ts

import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular';
// import { IGX_EXPANSION_PANEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-expansion-panel>
        <igx-expansion-panel-header>
            <igx-expansion-panel-title>
            Golden Retriever
            </igx-expansion-panel-title>
            <igx-expansion-panel-description>
            Medium-large gun dog
            </igx-expansion-panel-description>
        </igx-expansion-panel-header>
        <igx-expansion-panel-body>
            The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, 
            such as ducks and upland game birds, during hunting and shooting parties. 
            The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. 
            Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards.
        </igx-expansion-panel-body>
    </igx-expansion-panel>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_EXPANSION_PANEL_DIRECTIVES]
    /* or imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent] */
})
export class HomeComponent {}

    이제 Ignite UI for Angular 가져왔으므로 igx-expansion-panel 구성 요소 사용을 시작할 수 있습니다.

    Using the Angular Expansion Panel

    아래 표에는 Angular 확장 패널에 사용 가능한 모든 마크업 부분이 나와 있습니다.

    태그 이름 설명
    igx-expansion-panel 구성 요소 호스트 - 헤더와 본문을 저장합니다.
    igx-expansion-panel-header 구성요소 헤더를 저장합니다. 이는 항상 표시됩니다. 제목과 설명은 물론 추가 콘텐츠를 저장합니다.
    igx-expansion-panel-title 확장 패널 제목을 설정하는 데 사용합니다.
    igx-expansion-panel-description 짧은 요약을 제공하는 데 사용할 수 있습니다. 설명은 항상 제목 뒤에 표시됩니다(제목이 설정된 경우).
    igx-expansion-panel-icon 기본 확장/축소 아이콘을 변경하는 데 사용합니다.
    igx-expansion-panel-body 이는 확장 가능한 컨테이너이며 패널이 확장된 경우에만 표시됩니다.

    Properties Binding and Events

    패널의 현재 상태에 따라 igx-expansion-panel-description 표시하거나 숨기도록 구성 요소에 몇 가지 논리를 추가할 수 있습니다.
    설명을 컨트롤 collapsed 속성에 바인딩하여 이를 수행할 수 있습니다.

    // in expansion-panel.component.ts
import { IgxExpansionPanelComponent } from 'igniteui-angular';
// import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ExpansionPanelComponent {
    @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
    public panel: IgxExpansionPanelComponent;
}

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header>
        Golden Retriever
        <igx-expansion-panel-description *ngIf="panel.collapsed">
            Medium-large gun dog
        </igx-expansion-panel-description>
    </igx-expansion-panel-header>
    ...
</igx-expansion-panel>

    다음 코드 샘플은 구성 요소가 축소된 상태일 때만 간단한 설명을 표시합니다. 구성 요소 상태에 따라 더 복잡한 기능을 추가하려면 이벤트 이미터에 바인딩할 수도 있습니다.

    // in expansion-panel.component.ts

@Component({...})
export class ExpansionPanelComponent {
    ...
    public handleExpansion(args: {event: Event}): void {
        ... // Some functionality
    }
}

    <!-- in expansion-component.component.html -->
<igx-expansion-panel (onExpanded)="handleExpansion($event)" (contentCollapsed)="handleCollapse($event)"></igx-expansion-panel>

    아래에 결과가 있습니다.

    Component Customization

    그만큼 IgxExpansionPanelComponent 쉽게 사용자 정의할 수 있습니다. 헤더. 헤더 아이콘의 위치 구성은 다음을 통해 수행할 수 있습니다. iconPosition에 입력 igx-expansion-panel-header. 아이콘 위치에 대해 가능한 옵션은 다음과 같습니다. 왼쪽, 오른쪽 그리고 없음. 다음 코드 샘플은 구성요소의 버튼이 오른쪽 옆.

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header [iconPosition]="'right'"></igx-expansion-panel-header>
    ...
</igx-expansion-panel>
    Note

    ​iconPosition 속성은 RTL과 함께 작동합니다. 예를 들어 오른쪽에 표시되도록 설정된 아이콘은 RTL이 켜져 있을 때 헤더의 가장 왼쪽 부분에 표시됩니다.

    컨트롤의 토글 상태에 대한 기본 아이콘을 템플릿화할 수 있습니다. igx-expansion-panel-icon 태그에 콘텐츠를 전달하면 됩니다.

    <!-- in expansion-component.component.html -->
<igx-expansion-panel>
    <igx-expansion-panel-header [iconPosition]="'right'">
        ...
        <igx-expansion-panel-icon>
            <span class="example-icon" *ngIf="panel.collapsed">Show More</span>
            <span class="example-icon" *ngIf="!panel.collapsed">Show Less</span>
        </igx-expansion-panel-icon>
    </igx-expansion-panel-header>   
    ...
</igx-expansion-panel>

    Angular 확장 패널은 이제 패널이 접힐 때 "더 보기"를 렌더링하고 완전히 확장되면 "덜 보기"를 렌더링합니다.

    ​IgxExpansionPanel 컨트롤을 사용하면 모든 종류의 콘텐츠를 igx-expansion-panel-body 내부에 추가할 수 있습니다. IgxGrid, IgxCombo, 차트 및 기타 확장 패널을 렌더링할 수 있습니다!

    단순화를 위해 확장 패널의 본문에 몇 가지 기본 마크업을 추가하겠습니다.

    <!-- in expansion-panel.component.html -->
...
<igx-expansion-panel-body>
    <div class="example-content">
        <img [src]="imgSource" alt="dog-image">
        The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks and upland game birds, during hunting and shooting parties. The name "retriever" refers to the breed's ability to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and are easy to train to basic or advanced obedience standards.
        <a igxButton="outlined" target="_blank" [href]="readMore">Read more</a>
    </div>
</igx-expansion-panel-body>
...

    위의 모든 변경 사항의 결과를 살펴보겠습니다.

    스타일링

    Angular Expansion Panel Demo

    Palettes & Colors

    먼저 나중에 구성 요소에 전달할 수 있는 사용자 정의 팔레트를 만듭니다.

    // In real life, this should be in our main sass file so we can share the palette between all components. 
// In our case, it's in the component SCSS file "expansion-styling.component.scss".

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

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

// Add your brand colors.
$my-primary-color:#353a4b;
$my-secondary-color: #ffd351;

// Create custom palette.
$my-color-palette: palette(
    $primary: $my-primary-color,
    $secondary: $my-secondary-color
);

    Creating the Component Theme

    이제 구성 요소 테마를 만들고 위의 캡처에서 $my-color-palette 팔레트를 전달해 보겠습니다.

    // In expansion-styling.component.scss
// Create expansion panel theme.
$custom-panel-theme: expansion-panel-theme(
    // pass `$my-color-palette` palette.
    $palette: $my-color-palette,

    // Styling parameters.
    $header-background: color($my-color-palette, "primary", 700),
    $header-focus-background: color($my-color-palette, "primary", 700),
    $header-title-color: color($my-color-palette, "secondary"),
    $header-icon-color: color($my-color-palette, "secondary"),
    $body-background: color($my-color-palette, "primary", 700),
    $body-color: color($my-color-palette, "secondary" 100),
    $border-radius: .5
);
    Note

    ​theming 엔진을 통해 스타일 지정에 사용 가능한 모든 매개변수를 보려면 API documentation 확인하세요.

    Applying the Component Theme

    이제 구성 요소 테마를 적용하기 위해 남은 것은 css-vars mixin을 포함하고 $custom-panel-theme 맵을 전달하는 것입니다.

    // In expansion-styling.component.scss
// Pass our custom-panel-theme to `igx-expansion-panel` mixin.
// The `:host` here makes sure that all the theming will affect only this component.
:host {
  @include css-vars($custom-panel-theme);
}
    Note

    Internet Explorer 11을 지원해야 하는 경우 css-vars 대신 mixin igx-expansion-panel 구성 요소를 사용해야 하며 구성 요소에 Emulated ViewEncapsulation이 있으므로::ng-deep 사용하여 이를 침투해야 합니다. 또한 사용자 정의 테마가 다른 구성 요소로 누출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함해야 합니다.

    // In expansion-styling.component.scss
// The `:host` here makes sure that all the theming will affect only this component after the ViewEncapsulation Penetration.
:host {
    // Penetrate the ViewEncapsulation.
    ::ng-deep {
        @include expansion-panel($custom-panel-theme);
    }
}

    Ignite UI 테마 엔진을 사용하는 방법에 대해 자세히 알아보려면 click here

    Angular Expansion Panel Animations

    Using specific animation

    컴포넌트 확장 및 축소 시 기본 애니메이션 외에 다른 애니메이션을 사용할 수도 있습니다. 앞서 설명한 대로 igxExpansionPanel이 이미 app.module.ts에서 가져왔다고 가정하면 사용자 정의 애니메이션 설정 객체를 생성하고 Agular 확장 패널용 Ignite UI에서 사용되도록 설정할 수 있습니다. 이 접근 방식에는 useAnimation 메서드와 사용할 특정 애니메이션이 필요하므로 이를 가져오고 다음과 같은 애니메이션 설정을 정의하기 시작합니다.

    // in expansion-panel.component.ts
import { useAnimation } from '@angular/animations';
import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from 'igniteui-angular';
// import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ExpansionPanelComponent {
    @ViewChild(IgxExpansionPanelComponent, {read: IgxExpansionPanelComponent})
    public panel: IgxExpansionPanelComponent;

    public animationSettingsCustom = {
        closeAnimation: useAnimation(slideOutRight, {
            params: {
                duration: '100ms',
                toPosition: 'translateX(25px)'
            }
        }),
        openAnimation: useAnimation(slideInLeft, {
            params: {
                duration: '500ms',
                fromPosition: 'translateX(-15px)',
                startOpacity: 0.1
            }
        })
    };

    public collapsed() {
        return this.panel && this.panel.collapsed;
    }
}

    보시다시피 우리는 slideInLeft 그리고 slideOutRight 우리의 애니메이션 내장된 애니메이션 제품군 구성 요소 콘텐츠가 왼쪽에서 더 극적으로 나타나고 콘텐츠를 축소할 때 오른쪽에서 사라지도록 합니다. 이 과정에서 기존 매개변수 중 일부를 사용하려는 특정 매개변수로 재정의합니다.

    샘플은 일부 사용자 정보를 보여주며 여기서 중요한 점은 다음과 같이 애니메이션 설정을 구성 요소에 전달하는 것입니다. [animationSettings] = "animationSettingsCustom"

    <!-- in expansion-panel.component.html -->
...
<igx-expansion-panel [animationSettings] = "animationSettingsCustom" class="my-expansion-panel">
    <igx-expansion-panel-header>
        <igx-expansion-panel-title class="sample-title">Angular</igx-expansion-panel-title>
    </igx-expansion-panel-header>
    <igx-expansion-panel-body>
        Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
    </igx-expansion-panel-body>
</igx-expansion-panel>
...

    아래 결과를 볼 수 있습니다.

    Multiple panel scenario

    ​igxAccordion 주제 보기

    API Reference

    Theming Dependencies