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/expansion-panel';
// 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/expansion-panel';
// 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/expansion-panel';
// 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 수 있게 해줍니다. S,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>
...

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

    스타일링

    Expansion Panel Theme Property Map

    그리고$header-background 속성을 변경하면$body-background 다음 종속 속성들이 자동으로 업데이트됩니다:

    기본 속성 종속 속성 설명
    $header 배경
    		 $header-제목-컬러 패널 헤더, 제목, 텍스트 색상.
    $header-아이콘-컬러 패널 헤더 아이콘 색상.
    $header-description-color(색상) 패널 헤더, 설명, 텍스트 색상.
    $header-초점-배경 패널 헤더는 배경색에 초점을 맞추세요.
    $disabled-텍스트-컬러 패널이 텍스트 색상을 비활성화했습니다.
    $disabled-description-color(색상) 패널은 헤더 설명 텍스트 색상을 비활성화했습니다.
    $body 배경 $body색 패널 본문 텍스트 색상.

    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;
$my-surface-color: #efefef;

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

    Creating the Component Theme

    이제 컴포넌트 테마를 만들고 위 스나이프드에서 팔레트를$my-color-palette 전달해 봅시다.

    // In expansion-styling.component.scss
// Create expansion panel theme.
$custom-panel-theme: expansion-panel-theme(
  // 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
);

    팔레트를 만드는 대신 색상을 인수로 직접 확장판 테마 함수에 할당할 수 있습니다. 만약 전경 특성이 명시적으로 제공되지 않은 경우title-color​icon-color, 배경과의 대비가 더 좋은 검정 또는 흰색에 자동으로 할당됩니다.

    $custom-panel-theme: expansion-panel-theme(
  $header-background: #353a4b,
  $header-focus-background: #353a4b,
  $header-title-color: #ffd351,
  $header-icon-color: #ffd351,
  ...
);
    Note

    엔진을 통해theming 스타일링에 필요한 모든 가능한 매개변수를 확인하려면 다음을 확인하세요.API documentation

    Applying the Component Theme

    이제 컴포넌트 테마를 적용하려면 믹싱을 포함css-vars 하고 맵을$custom-panel-theme 전달하기만 하면 됩니다.

    // In expansion-styling.component.scss
@include css-vars($custom-panel-theme);

    테마 엔진을 어떻게 활용할 수 있는지 더 알아보려면 Ignite UIclick here

    Demo

    Styling with Tailwind

    확장 패널은 저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

    전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

    @import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

    유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

    • 라이트 테마에는 클래스를 사용light-* 하세요.
    • 어두운 테마에는 클래스를 사용dark-* 하세요.
    • 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-expansion-panel​dark-expansion-panel 예: .

    이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

    전체 부동산 목록은 확장 패널 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

    <igx-expansion-panel
  class="!light-expansion-panel
  ![--header-background:#4F6A5A]
  ![--body-background:#A3C7B2]"
>
  ...
</igx-expansion-panel>
    Note

    느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

    마지막에 확장 패널은 다음과 같이 보여야 합니다:

    Angular Expansion Panel Animations

    Using specific animation

    컴포넌트를 확장하거나 접을 때 기본 애니메이션 외에 다른 방법도 사용할 수 있습니다. igxExpansionPanel이 이미 이전에 설명한 대로 임포트app.module.ts 되어 있다면, 커스텀 애니메이션 설정 오브젝트를 만들어 Ignite UI for Angular 확장 패널에서 사용하도록 설정할 수 있습니다. 이 접근법은 메서드와 특정 애니메이션을 사용해야useAnimation 하므로 이를 가져오고 다음과 같은 애니메이션 설정을 정의하기 시작합니다:

    // in expansion-panel.component.ts
import { useAnimation } from '@angular/animations';
import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
import { slideInLeft, slideOutRight } from 'igniteui-angular/animations';
// 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