Dialog

import { Button, Dialog } from '@vapor-ui/core';

export default function DefaultDialog() {
    return (
        <Dialog.Root>
            <Dialog.Trigger render={<Button />}>클릭</Dialog.Trigger>
            <Dialog.Popup>
                <Dialog.Header>
                    <Dialog.Title>알림</Dialog.Title>
                    <Dialog.Close aria-label="Close" />
                </Dialog.Header>
                <Dialog.Body>
                    <Dialog.Description>
                        여기에 다이얼로그 본문 내용이 들어갑니다.
                    </Dialog.Description>
                </Dialog.Body>
                <Dialog.Footer style={{ marginLeft: 'auto' }}>
                    <Button colorPalette="primary">확인</Button>
                </Dialog.Footer>
            </Dialog.Popup>
        </Dialog.Root>
    );
}

import { Button, Dialog } from '@vapor-ui/core';

export default function DialogSize() {
    return (
        <div className="flex gap-4">
            <Dialog.Root size="md">
                <Dialog.Trigger render={<Button>Medium Dialog</Button>} />
                <Dialog.Popup>
                    <Dialog.Header>
                        <Dialog.Title>Medium Size</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>
                        <Dialog.Description>Medium 크기의 다이얼로그입니다.</Dialog.Description>
                    </Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                        <Button>확인</Button>
                    </Dialog.Footer>
                </Dialog.Popup>
            </Dialog.Root>

            <Dialog.Root size="lg">
                <Dialog.Trigger render={<Button>Large Dialog</Button>} />
                <Dialog.Popup>
                    <Dialog.Header>
                        <Dialog.Title>Large Size</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>
                        <Dialog.Description>Large 크기의 다이얼로그입니다.</Dialog.Description>
                    </Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                        <Button>확인</Button>
                    </Dialog.Footer>
                </Dialog.Popup>
            </Dialog.Root>

            <Dialog.Root size="xl">
                <Dialog.Trigger render={<Button>Extra Large Dialog</Button>} />
                <Dialog.Popup>
                    <Dialog.Header>
                        <Dialog.Title>Extra Large Size</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>
                        <Dialog.Description>
                            Extra Large 크기의 다이얼로그입니다.
                        </Dialog.Description>
                    </Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                        <Button>확인</Button>
                    </Dialog.Footer>
                </Dialog.Popup>
            </Dialog.Root>
        </div>
    );
}

import { Button, Dialog } from '@vapor-ui/core';

export default function DialogModal() {
    return (
        <div className="flex gap-4">
            <Dialog.Root modal={true}>
                <Dialog.Trigger render={<Button>Modal Dialog</Button>} />
                <Dialog.Popup>
                    <Dialog.Header>
                        <Dialog.Title>Modal Dialog</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>
                        <Dialog.Description>
                            포커스가 다이얼로그 내부에 제한됩니다.
                        </Dialog.Description>
                    </Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button>확인</Button>} />
                    </Dialog.Footer>
                </Dialog.Popup>
            </Dialog.Root>

            <Dialog.Root modal={false}>
                <Dialog.Trigger render={<Button>Non-Modal Dialog</Button>} />
                <Dialog.Popup>
                    <Dialog.Header>
                        <Dialog.Title>Non-Modal Dialog</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>
                        <Dialog.Description>
                            배경의 다른 요소들과 상호작용할 수 있습니다.
                        </Dialog.Description>
                    </Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button>확인</Button>} />
                    </Dialog.Footer>
                </Dialog.Popup>
            </Dialog.Root>
        </div>
    );
}

import { Button, Dialog } from '@vapor-ui/core';

export default function Flexible() {
    return (
        <Dialog.Root size="lg" closeOnClickOverlay={false}>
            <Dialog.Trigger render={<Button variant="outline">확인 다이얼로그</Button>} />
            <Dialog.PortalPrimitive>
                <Dialog.OverlayPrimitive />
                <Dialog.PopupPrimitive>
                    <Dialog.Header>
                        <Dialog.Title>작업 확인</Dialog.Title>
                    </Dialog.Header>
                    <Dialog.Body>
                        <Dialog.Description>
                            이 작업을 진행하시겠습니까? 이 작업은 되돌릴 수 없습니다.
                        </Dialog.Description>
                    </Dialog.Body>
                    <Dialog.Footer>
                        <Dialog.Close render={<Button variant="ghost">취소</Button>} />
                        <Dialog.Close render={<Button colorPalette="danger">삭제</Button>} />
                    </Dialog.Footer>
                </Dialog.PopupPrimitive>
            </Dialog.PortalPrimitive>
        </Dialog.Root>
    );
}