LoadingOverlay

LoadingOverlay

중앙에 로더가 있는 오버레이 컴포넌트예요. 상대 위치(position: relative)의 부모 요소 위에 로더가 있는 오버레이를 렌더링해요. 보통 폼의 로딩 상태를 나타낼 때 사용해요.

출처: 문서

본문

사용법 (Usage)

LoadingOverlay는 상대 위치의 부모 요소 위에 로더가 있는 오버레이를 렌더링해요. 보통 폼의 로딩 상태를 나타내는 데 사용해요. 오버레이 아래의 요소는 여전히 키보드로 포커스할 수 있으므로, 이 경우를 처리할 추가 로직을 작성해야 해요.

LoadingOverlay의 렌더링은 visible prop으로 제어돼요.

import { useDisclosure } from '@mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure(false);

  // Note that position: relative is required
  return (
    <>
      <Box pos="relative">
        <LoadingOverlay visible={visible} />
        {/* ...other content */}
      </Box>

      <Group justify="center">
        <Button onClick={toggle}>Toggle overlay</Button>
      </Group>
    </>
  );
}

로더 props (Loader props)

loaderProps로 Loader 컴포넌트에 prop을 전달할 수 있어요.

import { useDisclosure } from '@mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure(true);

  return (
    <>
      <Box pos="relative">
        <LoadingOverlay visible={visible} loaderProps={{ size: 40, type: 'bars' }} />
        {/* ...other content */}
      </Box>

      <Group justify="center">
        <Button onClick={toggle}>Toggle overlay</Button>
      </Group>
    </>
  );
}

커스텀 인라인 로더 (Custom inline loaders)

기본 로더를 커스텀 콘텐츠로 바꾸려면 loaderProps={{ children: Your content }}을 설정해요. loaderProps.children에는 어떤 React 노드든 넣을 수 있어요.

import { useDisclosure } from '@mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure(false);

  return (
    <>
      <Box pos="relative">
        <LoadingOverlay
          visible={visible}
          loaderProps={{ children: 'Loading...' }}
        />
        {/* ...other content */}
      </Box>

      <Group justify="center">
        <Button onClick={toggle}>Toggle overlay</Button>
      </Group>
    </>
  );
}

더 알아보기 (Learn more)

• Loader
• HoverCard
• Menu