Notification

Notification (알림)

사용자의 주의를 무언가로 끌어내기 위한 단순한 색상 블록이에요. 뷰포트 모서리에 고정된 알림(pinned notification)으로도 사용할 수 있고, 그래서 delete 요소를 지원해요.

출처: 문서

본문

notification은 사용자의 주의를 무언가로 끌어내기 위한 단순한 색상 블록이에요. 뷰포트 모서리에 고정된 알림으로도 쓸 수 있기 때문에 delete 요소를 지원해요.

Example

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
  <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
  nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam,
  et dictum <a>felis venenatis</a> efficitur.
</div>

색상 (Colors)

notification 요소는 $colors Sass map에서 정의한 모든 색상을 지원해요. 기본(기본값)부터 is-link, is-primary, is-info, is-success, is-warning, is-danger까지 is-* 수정자를 붙여서 사용해요.

Example

<div class="notification is-link">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

라이트 색상 (Light colors)

각 색상에는 라이트 버전도 있어요. is-light 수정자를 붙이면 notification의 라이트 버전을 얻을 수 있어요.

Example

<div class="notification is-link is-light">
  <button class="delete"></button>
  Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum
  dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta
  nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
  diam, et dictum <a>felis venenatis</a> efficitur.
</div>

JavaScript 예시

Bulma 패키지는 어떤 JavaScript도 포함하고 있지 않아요. 하지만 여기 페이지 어디에 있든 Bulma의 delete 요소에 click 핸들러를 설정하는 구현 예시를 vanilla JavaScript로 보여 드릴게요.

<div class="notification">
  <button class="delete"></button>
  Lorem ipsum
</div>

document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;

    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});

Sass와 CSS 변수

더 알아보기 (Learn more)

• Delete 요소
• Message 컴포넌트