토스트
가볍고 쉽게 사용자 정의할 수 있는 알림 메시지인 토스트로 방문자에게 푸시 알림을 제공합니다.
토스트는 모바일 및 데스크톱 운영 체제에서 대중화된 푸시 알림을 모방하도록 설계된 가벼운 알림입니다. 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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
살다
아래 버튼을 클릭하면 기본적으로 로 숨겨져 있는 토스트(오른쪽 하단 모서리에 있는 유틸리티 위치)를 표시합니다 .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</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">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</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">×</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">×</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">×</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">×</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">×</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="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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
기술적으로 알림에 포커스 가능/실행 가능한 컨트롤(예: 추가 버튼 또는 링크)을 추가하는 것이 가능하지만 알림을 자동 숨기기 위해 이 작업을 수행하지 않아야 합니다. delay
알림에 긴 시간 제한 을 부여하더라도 키보드 및 보조 기술 사용자는 알림에 제 시간에 도달하여 조치를 취하기 어려울 수 있습니다(토스트가 표시될 때 포커스를 받지 않기 때문). 추가 제어가 절대적으로 필요한 경우 와 함께 알림을 사용하는 것이 좋습니다 autohide: false
.
자바스크립트 동작
용법
JavaScript를 통해 알림 초기화:
$('.toast').toast(option)
옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 에서 data-
와 같이 옵션 이름을 에 추가합니다 data-animation=""
.
이름 | 유형 | 기본 | 설명 |
---|---|---|---|
생기 | 부울 | 진실 | 토스트에 CSS 페이드 전환 적용 |
자동 숨기기 | 부울 | 진실 | 토스트 자동 숨기기 |
지연 | 숫자 | 500 |
토스트 숨기기 지연(ms) |
행동 양식
비동기식 메서드 및 전환
모든 API 메서드는 비동기식 이며 전환 을 시작합니다 . 전환이 시작되자마자 그러나 끝나기 전에 호출자에게 돌아갑니다 . 또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.
$().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...
})