Notification

Notification

사용자에게 동적인 알림과 경고를 표시하는 컴포넌트예요. 알림 시스템의 일부로, Notification은 알림 시스템의 기본 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Notification은 알림 시스템의 기본 컴포넌트예요. 자체 시스템을 만들거나 @mantine/notifications 패키지를 사용해요.

import { Notification } from '@mantine/core';

function Demo() {
  return (
    <Notification title="We notify you that">
      You are now obligated to give a star to Mantine project on GitHub
    </Notification>
  );
}

loading, withCloseButton, withBorder, color, radius, title 등 다양한 prop을 지원해요.

알림 시스템 기능 (Notifications system features)

@mantine/notifications을 사용하면 알림을 다음 방식으로 닫을 수 있어요.

• 좌우로 끌어서(drag) 닫기
• hover 상태에서 가로 스크롤 스와이프로 닫기

이 상호작용은 Notifications 컴포넌트에서 allowDragDismiss={false}와 allowScrollDismiss={false}로 비활성화할 수 있어요. 설정에 대한 자세한 내용은 notifications 패키지 문서를 참고해요.

아이콘과 함께 (With icon)

import { XIcon, CheckIcon } from '@phosphor-icons/react';
import { Notification } from '@mantine/core';

function Demo() {
  const xIcon = <XIcon size={20} />;
  const checkIcon = <CheckIcon size={20} />;

  return (
    <>
      <Notification icon={xIcon} color="red" title="Bummer!">
        Something went wrong
      </Notification>
      <Notification icon={checkIcon} color="teal" title="All good!">
        Everything is fine
      </Notification>
    </>
  );
}

Styles API

Notification은 Styles API를 지원해요. classNames prop으로 컴포넌트의 내부 요소에 스타일을 추가할 수 있어요.

Styles API 셀렉터:

• root – 루트 요소
• loader – loading prop이 설정된 경우에만 표시되는 Loader 컴포넌트
• icon – icon prop이 설정된 경우에만 표시되는 아이콘 컴포넌트
• body – 다른 모든 요소를 포함하는 알림 본문
• title – title prop이 설정된 경우에만 표시되는 제목 요소
• description – 제목 아래에 표시되는 설명
• closeButton – 닫기 버튼 요소

접근성 (Accessibility)

스크린 리더를 지원하려면 closeButtonProps로 닫기 버튼의 aria-label이나 title을 설정해요.

import { Notification } from '@mantine/core';

function Demo() {
  return (
    <Notification
      title="Please wait"
      loading
      closeButtonProps={{ 'aria-label': 'Close notification' }}
    >
      The application is trying to reconnect to the server
    </Notification>
  );
}

더 알아보기 (Learn more)

• Loader
• Progress
• @mantine/notifications