React 확장 패널 개요

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

    React Expansion Panel Example

    Usage

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

    npm install igniteui-react

    그 다음에는 필요한 CSS를 가져오IgrExpansionPanel 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { IgrExpansionPanel } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    사용하기 가장 간단한 방법은IgrExpansionPanel 다음과 같습니다:

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

    Binding to events

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

    • 닫힘 - 확장 패널이 접힐 때 발생
    • Opened - 확장 패널이 확장되면 발생합니다.
    • 닫기 - 확장 패널이 접힐 때 발생합니다.
    • 오프닝 - 확장 패널이 확장되기 시작할 때 발생합니다.

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

    우리는 다음과Opened 같은 사건에Closed 결합함으로써 이를 실현할 수 있습니다:

    Component Customization

    이 컨트롤은IgrExpansionPanel 몸 안에 다양한 콘텐츠를 추가할 수 있게 해줍니다. 입력, 차트, 심지어 다른 확장 패널까지 렌더링할 수 있습니다!

    이 기능은IgrExpansionPanel 노출된 제목, 부제목, 표시 슬롯을 통해 헤더를 쉽게 맞춤화할 수 있게 해줍니다.

    확장 표시기의 위치 설정은 확장 패널의 특성을 통해indicatorPosition 수행할 수 있습니다. 가능한 선택지는 시작, 끝, 혹은 전혀 없을 뿐입니다.

    다음 코드 샘플은 컴포넌트 버튼을 오른쪽에 배치하는 방법을 보여줍니다.

    Keyboard Navigation

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

    주요 조합

    • ALT + ↓- 포커스 패널을 확장합니다.
    • ALT + ↑- 포커스 패널을 축소합니다.
    • SPACE / ENTER- 포커스가 있는 패널의 확장 상태를 전환합니다.

    Styling

    이 컴포넌트는IgrExpansionPanel 여러 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);
}

    API References

    Additional Resources