Web Components 확장 패널 개요

Ignite UI for Web Components 확장 패널은 축소 또는 확장의 두 가지 상태로 렌더링할 수 있는 경량 아코디언 구성 요소입니다. 확장 패널은 마우스 클릭 또는 키보드 상호 작용을 사용하여 전환할 수 있습니다.

Web Components Expansion Panel Example

import { defineComponents, IgcExpansionPanelComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelUsage.css';

defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
export class ExpansionPanelUsage {
	constructor() {
	}
}

new ExpansionPanelUsage();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Usage</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample" style="align-items: center;">
        <igc-expansion-panel>
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <span>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.[3] 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.</span>
        </igc-expansion-panel>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel{
    width: 100%;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents
cmd

IgcExpansionPanelComponent를 사용하기 전에 다음과 같이 등록해야 합니다.

import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';

defineComponents(IgcExpansionPanelComponent);
ts

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

IgcExpansionPanelComponent 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

<igc-expansion-panel>
    <div slot="title">Golden Retriever</div>
    <div slot="subTitle">Medium-large gun dog</div>
    <div>
        <p>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.[3] 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.</p>
    </div>
</igc-expansion-panel>
html

Binding to events

확장 패널 구성요소는 다음 이벤트를 발생시킵니다.

igcClosed - 확장 패널이 접힐 때 발생합니다.
igcOpened - 확장 패널이 확장되면 발생합니다.
igcClosing - 확장 패널이 접히기 시작할 때 발생합니다.
igcOpening - 확장 패널이 확장되기 시작할 때 발생합니다.

다음 샘플은 패널의 현재 상태에 따라 subtitle 표시하거나 숨기도록 구성 요소에 로직을 추가하는 방법을 보여줍니다.

igcOpened 및 igcClosed 이벤트 이미터에 바인딩하여 이를 수행할 수 있습니다.

import { defineComponents, IgcExpansionPanelComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelPropertiesAndEvents.css';

defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
export class ExpansionPanelPropertiesAndEvents {
    private panel: IgcExpansionPanelComponent;
    private firedEventSpan: HTMLSpanElement;
    private subtitle: HTMLElement | null;
    private timeout!: NodeJS.Timeout;

    constructor() {
        this.panel = document.getElementById("exp-panel") as IgcExpansionPanelComponent;
        this.firedEventSpan = document.getElementById("fired-event") as HTMLSpanElement;
        this.subtitle = document.querySelector("[slot='subtitle']");

        this.panel.addEventListener("igcOpened", this.handleExpansionPanelEvents.bind(this));
        this.panel.addEventListener("igcClosed", this.handleExpansionPanelEvents.bind(this));
    }

    public handleExpansionPanelEvents(ev: CustomEvent) {
        if(this.subtitle){
            if(ev.type === "igcOpened"){
                this.subtitle.style.display = 'none';
            }
            if(ev.type === "igcClosed"){
                this.subtitle.style.display = 'block';
            }
        }

        clearTimeout(this.timeout!);

        this.firedEventSpan.textContent = ev.type + " event fired!";
        this.firedEventSpan.style.display = 'block';
        this.timeout = setTimeout(() => {
            this.firedEventSpan.style.display = 'none';
        }, 2000);
    }
}

new ExpansionPanelPropertiesAndEvents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Properties and Events</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample" style="align-items: center;">
        <igc-expansion-panel id="exp-panel">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <span>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.[3] 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.
          </span>
        </igc-expansion-panel>
        <span id="fired-event"></span>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel{
    width: 100%;
    height: 300px;
}

span#fired-event {
    background-color: rgba(0,0,0,0.5);
    border-radius: 26px;
    padding: 1rem 1.5rem;
    color:white;
    display: none;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Component Customization

IgcExpansionPanelComponent 컨트롤을 사용하면 모든 종류의 콘텐츠를 본문 내부에 추가할 수 있습니다. 입력, 차트 및 기타 확장 패널을 렌더링할 수 있습니다!

IgcExpansionPanelComponent 사용하면 노출된 제목, 하위 제목 및 표시기 슬롯을 통해 헤더를 쉽게 사용자 정의할 수 있습니다.

확장 표시기의 위치 구성은 확장 패널의 속성을 통해 indicatorPosition 수행할 수 있습니다. 가능한 옵션은 start, end 또는 none 입니다.

다음 코드 샘플은 구성 요소의 버튼이 오른쪽으로 이동하도록 구성하는 방법을 보여줍니다.

import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./ExpansionPanelCustomization.css";

defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent);
export class ExpansionPanelCustomization {
    private panel: IgcExpansionPanelComponent;
    private indicator: HTMLElement | null;

    constructor() {
        this.panel = document.getElementById("exp-panel") as IgcExpansionPanelComponent;
        this.indicator = document.querySelector("[slot='indicator']");

        this.panel.addEventListener("igcOpened", this.handleExpansionPanelEvents.bind(this));
        this.panel.addEventListener("igcClosed", this.handleExpansionPanelEvents.bind(this));
    }

    public handleExpansionPanelEvents(ev: CustomEvent) {
        if (this.indicator) {
            if (ev.type === "igcOpened") {
                this.indicator.textContent = "Show less";
            }
            if (ev.type === "igcClosed") {
                this.indicator.textContent = "Show more";
            }
        }
    }
}

new ExpansionPanelCustomization();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Customization</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-expansion-panel id="exp-panel" indicator-position="end">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <div slot="indicator">Show more</div>
          <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
          <span>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.[3] 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.</span>
          <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="outlined" target="_blank">Read more</igc-button>
        </igc-expansion-panel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
    border: 1px solid rgba(171, 171, 171, 0.3);
    padding: 0;
}

igc-button {
    display: flex;
    margin-top: 16px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Ignite UI for Web Components 확장 패널 키보드 탐색은 W3C 접근성 표준을 준수하며 사용하기 편리합니다.

주요 조합

Alt + ↓- 초점이 맞춰진 패널 확장
Alt + ↑- 초점이 맞춰진 패널 축소
스페이스바 / Enter- 초점이 맞춰진 패널의 확장 상태를 전환합니다.

Styling

구성 요소는 IgcExpansionPanelComponent 여러 CSS 부분을 노출하여 스타일을 완전히 제어할 수 있습니다.

이름	설명
`header`	확장 표시기, 제목 및 부제목의 컨테이너입니다.
`title`	제목 컨테이너입니다.
`subtitle`	자막 컨테이너입니다.
`indicator`	지표 컨테이너입니다.
`content`	확장 패널의 콘텐츠 래퍼입니다.

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base) {
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base)::before {
  background-color: var(--ig-warn-500);
}

igc-expansion-panel::part(indicator) {
  color: var(--ig-warn-500);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}
css

import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelStyling.css';

defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent);
export class ExpansionPanelStyling {
	constructor() {
	}
}

new ExpansionPanelStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-expansion-panel indicator-position="end">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
          <span>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.[3] 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.</span>
          <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="contained" target="_blank">Read more</igc-button>
        </igc-expansion-panel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel {
    width: 500px;
    background-color: #18203b;
    color: white;
    border-radius: 8px;
}

igc-button::part(base){
    color: #18203b;
}

igc-button::part(base)::before {
    background-color: #ffd351;
}

igc-expansion-panel::part(indicator) {
    color: #ffd351;
}

igc-expansion-panel::part(header) {
    background-color: #18203b;
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
    color: #ffd351;
}

igc-button {
    display: flex;
    margin-top: 16px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Web Components 확장 패널 개요

Web Components Expansion Panel Example

Usage

Binding to events

Component Customization

Keyboard Navigation

Styling

API References

Additional Resources