Source

토스트

가볍고 쉽게 사용자 정의할 수 있는 알림 메시지인 토스트로 방문자에게 푸시 알림을 보내십시오.

토스트는 모바일 및 데스크톱 운영 체제에서 대중화된 푸시 알림을 모방하도록 설계된 가벼운 알림입니다. flexbox로 제작되어 정렬 및 위치 지정이 쉽습니다.

개요

토스트 플러그인을 사용할 때 알아야 할 사항:

소스에서 JavaScript를 빌드하는 경우util.js .
토스트는 성능상의 이유로 선택되어 있으므로 직접 초기화해야 합니다 .
토스트 위치 지정은 귀하에게 책임이 있음을 유의하십시오.
를 지정하지 않으면 토스트가 자동으로 숨겨집니다 autohide: false.

이 구성 요소의 애니메이션 효과는 prefers-reduced-motion미디어 쿼리에 따라 다릅니다. 접근성 설명서의 감소된 동작 섹션을 참조하십시오 .

예

기초적인

확장 가능하고 예측 가능한 토스트를 장려하려면 헤더와 본문을 권장합니다. 토스트 헤더는 display: flex를 사용하여 여백 및 플렉스박스 유틸리티 덕분에 콘텐츠를 쉽게 정렬할 수 있습니다.

토스트는 필요한 만큼 유연하고 필요한 마크업이 거의 없습니다. 최소한 "토스트된" 콘텐츠를 포함하고 닫기 버튼을 강력하게 권장하는 단일 요소가 필요합니다.

안녕하세요, 세계입니다! 건배 메시지입니다.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

투명한

토스트도 약간 반투명하기 때문에 무엇이든 섞일 수 있습니다. CSS 속성 을 지원하는 브라우저의 경우 backdrop-filter알림 아래의 요소도 흐리게 처리합니다.

안녕하세요, 세계입니다! 건배 메시지입니다.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

스태킹

여러 개의 토스트가 있는 경우 기본적으로 읽을 수 있는 방식으로 세로로 쌓습니다.

보다? 이대로.

주의, 토스트가 자동으로 쌓입니다.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

놓기

필요에 따라 맞춤 CSS로 토스트를 배치하세요. 상단 중앙과 마찬가지로 상단 오른쪽은 알림에 자주 사용됩니다. 한 번에 하나의 알림만 표시하려는 경우 위치 지정 스타일을 .toast.

안녕하세요, 세계입니다! 건배 메시지입니다.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

더 많은 알림을 생성하는 시스템의 경우 쉽게 쌓일 수 있도록 래핑 요소를 사용하는 것이 좋습니다.

보다? 이대로.

주의, 토스트가 자동으로 쌓입니다.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

flexbox 유틸리티를 사용하여 토스트를 수평 및/또는 수직으로 정렬할 수도 있습니다.

안녕하세요, 세계입니다! 건배 메시지입니다.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

접근성

토스트는 방문자 또는 사용자에게 약간의 방해를 주기 위한 것이므로 화면 판독기 및 유사한 보조 기술을 사용하는 사용자를 돕기 위해 토스트를 한 aria-live지역 에서 래핑해야 합니다 . 라이브 영역의 변경 사항(예: 알림 구성 요소 삽입/업데이트)은 사용자의 포커스를 이동하거나 사용자를 방해할 필요 없이 화면 판독기에 의해 자동으로 발표됩니다. 또한 aria-atomic="true"변경된 내용을 알리지 않고 전체 알림이 항상 단일(원자) 단위로 발표되도록 하려면 알림 내용의 일부만 업데이트하거나 나중 시점). 필요한 정보가 예를 들어 양식의 오류 목록과 같이 프로세스에 중요한 경우 경고 구성 요소 를 사용하십시오.토스트 대신.

알림 이 생성되거나 업데이트 되기 전에 라이브 영역이 마크업에 있어야 합니다 . 두 가지를 동시에 동적으로 생성하여 페이지에 삽입하면 일반적으로 보조 기술에 의해 발표되지 않습니다.

또한 내용에 따라 role및 레벨 을 조정해야 합니다 . aria-live오류와 같은 중요한 메시지라면 role="alert" aria-live="assertive", 그렇지 않으면 role="status" aria-live="polite"속성을 사용하세요.

표시하는 콘텐츠가 변경되면 사람들이 토스트를 읽을 수 있는 충분한 시간을 갖도록 delay시간 제한 을 업데이트해야 합니다.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

를 사용할 때 autohide: false사용자가 알림을 해제할 수 있도록 닫기 버튼을 추가해야 합니다.

안녕하세요, 세계입니다! 건배 메시지입니다.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

자바스크립트 동작

용법

JavaScript를 통해 알림 초기화:

$('.toast').toast(option)

옵션

옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-와 같이 옵션 이름을 에 추가합니다 data-animation="".

이름	유형	기본	설명
생기	부울	진실	토스트에 CSS 페이드 전환 적용
자동 숨기기	부울	진실	토스트 자동 숨기기
지연	숫자	`500`	토스트 숨기기 지연(ms)

행동 양식

비동기식 메서드 및 전환

모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

자세한 내용은 JavaScript 설명서를 참조하십시오 .

`$().toast(options)`

요소 컬렉션에 알림 핸들러를 연결합니다.

`.toast('show')`

요소의 토스트를 표시합니다. 알림이 실제로 표시 되기 전에(즉, shown.bs.toast이벤트가 발생하기 전에) 호출자에게 반환합니다. 이 메서드를 수동으로 호출해야 합니다. 대신 알림이 표시되지 않습니다.

$('#element').toast('show')

`.toast('hide')`

요소의 알림을 숨깁니다. 알림이 실제로 숨겨 지기 전에(즉, hidden.bs.toast이벤트가 발생하기 전에) 호출자에게 반환됩니다. 로 만든 경우 이 메서드를 수동으로 호출해야 autohide합니다 false.

$('#element').toast('hide')

`.toast('dispose')`

요소의 알림을 숨깁니다. 토스트는 DOM에 남아 있지만 더 이상 표시되지 않습니다.

$('#element').toast('dispose')

이벤트

이벤트 유형	설명
쇼.bs.toast	`show`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 발생합니다 .
show.bs.toast	이 이벤트는 알림이 사용자에게 표시되면 시작됩니다.
hide.bs.toast	`hide`이 이벤트는 인스턴스 메서드가 호출 되면 즉시 시작됩니다 .
hidden.bs.toast	이 이벤트는 토스트가 사용자에게 숨겨졌을 때 시작됩니다.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})