Web Components 대화 상자 개요

Ignite UI for Web Components Dialog 구성 요소는 일부 정보를 표시하거나 사용자에게 작업이나 확인을 요청하는 데 사용됩니다. 모달 창에 표시되므로 사용자는 대화 상자를 닫는 특정 작업이 수행될 때까지 기본 앱과 상호 작용할 수 없습니다.

Ignite UI for Web Components Dialog Example

이 샘플은 Web Components에서 Dialog 구성 요소를 만드는 방법을 보여줍니다.

Usage

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

npm install igniteui-webcomponents

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

defineComponents(IgcDialogComponent);

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

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

<igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>

<igc-dialog id="dialog" title="Confirmation">
    <p>Are you sure you want to delete the Annual_Report_2016.pdf and Annual_Report_2017.pdf files?</p>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">Cancel</igc-button>
    <igc-button slot="footer" onclick="dialog.close()" variant="flat">OK</igc-button>
</igc-dialog>

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

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

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

Closing

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

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

Form

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

Styling

이 컴포넌트는IgcDialogComponent 스타일을 완전히 제어할 수 있도록 여러 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);
}