Dialog
Dialog (다이얼로그)
Dialog 컴포넌트는 화면의 원하는 위치에 고정된 오버레이 다이얼로그를 보여 주는 컴포넌트예요. Modal의 간소화된 버전이에요.
출처: 문서
본문
Dialog는 Modal 컴포넌트의 간소화된 버전이에요. Modal의 대부분의 접근성·사용성 기능을 포함하지 않아요.
- 포커스 트랩(Focus trap)을 사용할 수 없어요
- 바깥을 클릭해도 닫히지 않아요
- 오버레이가 없어요
중요하지 않은 정보나 액션으로 주목을 끌 때 Dialog를 사용해요. 예를 들어 이메일 구독 폼을 만들 수 있어요.
import { useDisclosure } from '@mantine/hooks';
import { Dialog, Group, Button, TextInput, Text } from '@mantine/core';
function Demo() {
const [opened, { toggle, close }] = useDisclosure(false);
return (
<>
<Group justify="center">
<Button onClick={toggle}>Toggle dialog</Button>
</Group>
<Dialog
opened={opened}
withCloseButton
onClose={close}
size="lg"
position={{ bottom: 20, left: 20 }}
>
<Text size="sm" mb="xs" fw={500}>
Subscribe to email newsletter
</Text>
<Group align="flex-end">
<TextInput placeholder="[email protected]" style={{ flex: 1 }} />
<Button onClick={close}>Subscribe</Button>
</Group>
</Dialog>
</>
);
}
위치 바꾸기
Dialog는 Portal 안에 렌더링되고 고정된(fixed) 위치를 가져요. position prop으로 다이얼로그의 위치를 제어할 수 있어요.
import { Dialog } from '@mantine/core';
function Demo() {
return (
<>
<Dialog position={{ top: 20, left: 20 }} opened>
Dialog in top left corner
</Dialog>
<Dialog position={{ bottom: 20, left: 20 }} opened>
Dialog in bottom left corner
</Dialog>
</>
);
}
접근성 (Accessibility)
Dialog는 접근 가능하지 않으며 스크린 리더가 대부분 인지하지 못할 가능성이 높아요. 중요한 정보를 넣지 않도록 주의해요. 대부분의 경우 Modal, Drawer, Notifications를 선택하는 것이 더 좋아요.