toast ui 예제

알림은 필요한 만큼 유연하며 필요한 마크업이 거의 없습니다. 최소한 “토스트된” 콘텐츠를 포함하고 해제 단추를 강력히 권장하는 단일 요소가 필요합니다. 토스트도 약간 반투명하기 때문에, 토스트는 위에 나타날 수 있는 모든 것에 잘 어우러져 있습니다. 배경 필터 CSS 속성을 지원하는 브라우저의 경우 알림 아래에 있는 요소도 흐리게 합니다. 다음은 작업에 응답해야 하는 두 가지 유형의 대화 상자의 예입니다. 필요에 따라 사용자 지정 CSS로 건배를 배치합니다. 오른쪽 상단은 종종 알림에 사용되며, 가운데 위쪽도 사용됩니다. 한 번에 하나의 토스트만 표시하려는 경우 .toast에 위치 지정 스타일을 바로 배치합니다. 요소의 알림이 숨깁니다. 토스트는 DOM에 남아 있지만 더 이상 표시되지 않습니다.

사용자가 수행한 작업이 성공적으로 수행되었거나 수행되었음을 사용자에게 알리고자 하는 경우. 예를 들어 nhn/toast-ui.vue-editor에서 새 릴리스에 대한 알림을 원하십니까? 예를 들어; 메일을 보낼 때 Gmail에서 “메시지 보내기…”라는 피드백을 받게 됩니다. 알림 메시지의 형태로 작성됩니다. 확장 가능하고 예측 가능한 알림을 장려하기 위해 헤더와 본문을 권장합니다. 토스트 헤더는 디스플레이를 사용합니다: 플렉스, 우리의 마진 과 플렉스 박스 유틸리티 덕분에 콘텐츠의 쉬운 정렬을 허용. 알림, 가볍고 쉽게 사용자 정의 경고 메시지와 방문자에게 알림을 푸시. TOAST UI 에디터의 Vue 래퍼는 전 세계적으로 TOAST UI 편집기의 사용 빈도를 식별하기 위해 오픈 소스 사용에 대한 통계를 수집하기 위해 Google 애널리틱스(GA)를 적용합니다. 또한 향후 프로젝트 과정을 결정하는 중요한 지표로도 작동합니다. location.hostname (예 : ” ui.toast.com”)을 수집해야하며 유일한 목적은 사용에 대한 통계를 측정하는 것일 뿐입니다. GA를 사용하지 않도록 설정하려면 Vue 래퍼 를 선언할 때 다음 사용통계 옵션을 사용합니다.

알림은 방문자 나 사용자에게 작은 중단을 위한 것이므로 화면 판독기 및 유사한 보조 기술을 가진 사용자를 돕기 위해 aria 라이브 지역에서 알림을 래핑해야합니다. 라이브 영역(예: 알림 구성 요소 삽입/업데이트)에 대한 변경 사항은 사용자의 포커스를 이동하거나 사용자를 방해할 필요 없이 화면 판독기에서 자동으로 발표됩니다. 또한 aria atomic=”true”를 포함하여 변경된 내용을 발표하는 대신 전체 알림이 항상 단일(원자) 단위로 발표되도록 합니다(알림 콘텐츠의 일부만 업데이트하거나 동일한 내용을 표시하는 경우 문제가 발생할 수 있음). 나중에 알림을 참조하십시오.

Comments

Comments are closed.