Web Components 대화 상자 개요

    Ignite UI for Web Components 일부 정보를 표시하거나 사용자에게 작업 또는 확인 메시지를 표시하는 데 사용됩니다. 이는 모달 창에 표시됩니다. 즉, 대화 상자를 닫는 특정 작업이 수행될 때까지 사용자는 기본 앱과 상호 작용할 수 없습니다.

    Ignite UI for Web Components Dialog Example

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

    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 속성을 true로 설정하면 됩니다. 기본값은 false 입니다.

    Closing

    기본적으로 사용자가 ESC 키를 누르면 대화 상자가 자동으로 닫힙니다. keepOpenOnEscape 속성을 사용하면 이 동작을 방지할 수 있습니다. 기본값은 false 입니다. 대화 상자에 열린 드롭다운(또는 ESC 내부적으로 처리해야 하는 다른 요소)이 있는 경우 ESC 한 번 누르면 드롭다운이 닫히고 다시 누르면 대화 상자가 닫힙니다.

    ​closeOnOutsideClick 속성을 사용하여 대화 상자 외부를 클릭할 때 대화 상자를 닫아야 하는지 구성합니다. 기본값은 false 입니다.

    Form

    양식 요소에 method="dialog" 속성이 있는 경우 대화 상자를 닫을 수 있습니다. 양식을 제출하면 대화 상자가 닫힙니다.

    Styling

    대화 상자 구성 요소는 여러 CSS 부분(base, title, content 및 footer)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.

    igc-dialog::part(content) {
    background: #011627;
    color: white;
}

igc-dialog::part(title),
igc-dialog::part(footer) {
    background: #011627;
    color: #ECAA53;
}

    API References

    Additional Resources