React Dialog 개요

    Ignite UI for React Dialog 구성 요소는 일부 정보를 표시하거나 사용자에게 작업 또는 확인을 요청하는 데 사용됩니다. 이는 대화 상자를 닫는 특정 작업이 수행될 때까지 사용자가 기본 앱과 상호 작용할 수 없음을 의미합니다.

    Ignite UI for React Dialog Example

    이 샘플은 React에서 Dialog 컴포넌트를 만드는 방법을 보여줍니다.

    Usage

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

    npm install igniteui-react

    그 후 ReactIgrDialog와 필요한 CSS를 이렇게 불러와야 합니다:

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

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    대화 구성 요소를 표시하는 가장 간단한 방법은 그show 메서드를 사용해 버튼 클릭으로 호출하는 것입니다.

    <IgrButton variant="contained" clicked={this.onDialogShow}>
    <span>Show Dialog</span>
</IgrButton>

<IgrDialog ref={this.onDialogRef}>
    <span>Dialog Message</span>
</IgrDialog>

public onDialogRef(dialog: IgrDialog) {
    if (!dialog) { return; }
    this.dialogRef = dialog;
}

public onDialogShow() {
    if (this.dialogRef) {
        this.dialogRef.show();
    }
}

    Dialog 컴포넌트는 애플리케이션 시나리오에 맞게 상태를 구성할 수 있는 속성을 제공합니다open.

    이 속성을 사용title 해 대화 제목을 설정하세요. 하지만 해당 슬롯에title 콘텐츠가 제공된다면, 해당 콘텐츠가 해당 콘텐츠보다 우선합니다.

    행동 버튼이나 추가 정보는 대화 하단에 배치할 수 있습니다.footer 슬롯. 만약 그 안에 콘텐츠가 추가되지 않으면, 기본값이 됩니다OK 클릭하면 대화 상자를 닫는 버튼이 표시됩니다. 이 버튼이 표시되지 않길 원한다면 다음 버튼을 설정할 수 있습니다.hideDefaultAction property를 참. 기본 값은 다음과 같습니다 거짓.

    Closing

    기본적으로 사용자가 누르ESC 면 대화 창이 자동으로 닫힙니다. 부동산을 이용하면keepOpenOnEscape 이런 행동을 막을 수 있습니다. 기본 값은 false 입니다. 대화 중에 열린 드롭다운(또는 내부적으로 처리ESC 해야 할 다른 요소)이 있다면, 한 번 누르면ESC 드롭다운이 닫히고, 다시 누르면 대화가 종료됩니다.

    속성으로closeOnOutsideClick 외부 클릭 시 대화 상자를 닫아야 하는지 설정하세요. 기본 값은 false 입니다.

    Form

    폼 요소는 속성method="dialog"이 있으면 대화를 닫을 수 있습니다. 양식을 제출하면 대화가 종료됩니다.

    Styling

    이 컴포넌트는IgrDialog 스타일을 완전히 제어할 수 있도록 여러 CSS 부분을 노출합니다:

    이름 설명
    base 대화 상자의 기본 래퍼입니다.
    title 제목 컨테이너입니다.
    footer 바닥글 컨테이너입니다.
    content 콘텐츠 컨테이너입니다. 
    igc-dialog::part(content) {
  background: var(--ig-secondary-800);
  color: var(--ig-secondary-800-contrast);
}

igc-dialog::part(title),
igc-dialog::part(footer) {
  background: var(--ig-secondary-800);
  color: var(--ig-warn-500);
}

    API References

    Additional Resources