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에 대한 전체 소개는 시작 항목을 참조하십시오.

    The next step is to import the IgxExpansionPanelModule in your app.module.ts file.

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

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

    Alternatively, as of 16.0.0 you can import the IgxExpansionPanelComponent as a standalone dependency, or use the IGX_EXPANSION_PANEL_DIRECTIVES token to import the component and all of its supporting components and 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 {}

    Now that you have the Ignite UI for Angular Expansion Panel module or directives imported, you can start using the igx-expansion-panel component.

    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

    We can add some logic to our component to make it show/hide the igx-expansion-panel-description depending on the current state of the panel.
    We can do this by binding the description to the control collapsed property:

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

    The IgxExpansionPanelComponent allows for easy customization of the header. Configuring the position of the header icon can be done through the iconPosition input on the igx-expansion-panel-header. The possible options for the icon position are left, right and none. The next code sample demonstrates how to configure the component's button to go on the right side.

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

    The iconPosition property works with RTL - e.g. an icon set to show up in right will show in the leftmost part of the header when RTL is on.

    The default icon for the toggle state of the control can be templated. We can do that by passing content in an igx-expansion-panel-icon tag:

    <!-- 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 확장 패널을 접으면 "더 보기"가 표시되고, 완전히 펼치면 "줄여 보기"가 표시됩니다.

    The IgxExpansionPanel control allows all sorts of content to be added inside of the igx-expansion-panel-body. It can render IgxGrids, IgxCombo, charts and even other expansion panels!

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

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

    Changing the $header-background and $body-background properties automatically updates the following dependent properties:

    기본 속성 종속 속성 설명
    $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

    Now let's create our component theme and pass the $my-color-palette palette from the above sniped.

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

    If we prefer instead of creating a palette, we can assign the colors directly to the expansion-panel-theme function as arguments. If the title-color, icon-color, or other foreground properties are not explicitly provided, they will be automatically assigned to either black or white - whichever offers better contrast with the background.

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

    To see all the available parameters for styling trough the theming engine check the API documentation

    Applying the Component Theme

    Now to apply the component theme all that's left is to include css-vars mixin and pass the $custom-panel-theme map.

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

    To find out more on how you can use Ignite UI theming engine click here

    Demo

    Styling with Tailwind

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

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

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

    The utility file includes both light and dark theme variants.

    • Use light-* classes for the light theme.
    • Use dark-* classes for the dark theme.
    • Append the component name after the prefix, e.g., light-expansion-panel, dark-expansion-panel.

    Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

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

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

    The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

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

    Angular Expansion Panel Animations

    Using specific animation

    It is possible to use other than default animation when expanding and collapsing the component. Assuming the igxExpansionPanel is already imported in app.module.ts as previously described, you can create a custom animation setting object and set it to be used in the Ignite UI for Angular Expansion Panel. The approach requires the useAnimation method and the specific animations to be used so we start importing these and defining the animation settings like:

    // 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;
    }
}

    As you can see, we are going to use slideInLeft and slideOutRight animations from our inbuilt suite of animations to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use.

    The sample shows some user information and the key point here is passing the animation settings to the component like: [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