toastify js

toastify js

기타 소스코드

1.12.0

다운로드

토스트

Toastify는 가벼운 바닐라 JS 토스트 알림 라이브러리입니다.

데모

여기를 클릭하십시오

특징

다중 스택 알림
사용자 정의 가능
실행 스레드 차단이 없습니다

사용자 정의 옵션

알림 텍스트
지속
배경 색상
아이콘 디스플레이를 닫습니다
디스플레이 위치
오프셋 위치

설치

Toastify는 이제 NPM을 통한 설치를 지원합니다

아래 명령을 실행하여 기존 또는 새 프로젝트에 Toastify-JS를 추가하십시오.

npm install --save toastify-js

또는

yarn add toastify-js -S

Toastify-JS를 모듈로 가져와 사용을 시작하십시오.

import Toastify from 'toastify-js'

아래와 같이 Toastify의 기본 CSS를 사용하고 나중에 재정의하거나 자신의 CSS를 작성하도록 선택할 수 있습니다.

import "toastify-js/src/toastify.css"

기존 방법을 사용하여 HTML 페이지에 ToastifyJS 추가

Toastify 사용을 시작하려면 다음 CSS를 페이지에 추가하십시오.

 <link rel = "스타일 시트"유형 = "text/css"href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

그리고 페이지 하단의 스크립트

 <script type = "text/javaScript"src = "https://cdn.jsdelivr.net/npm/toastify-js"> </script>

파일은 jsdeliver가 제공하는 CDN 서비스를 통해 제공됩니다.

선적 서류 비치

 토스트 ({{
  텍스트 : "이것은 토스트입니다",
  기간 : 3000,
  목적지 : "https://github.com/apvarun/toastify-js",
  NewWindow : 사실,
  닫기 : 사실,
  중력 : "상단", //`상단 '또는'하단 '
  위치 : "왼쪽", //`left`,`center` 또는`오른쪽 '
  stoponfocus : true, // 호버에서 토스트를 무시하는 것을 방지합니다
  스타일 : {배경 : "선형 등급 (오른쪽으로, #00b09b, #96c93d)",
  },
  OnClick : function () {} // click} 이후 콜백). showtoast ();

토스트 메시지는 360px 미만의 화면 너비가있는 장치를 중심으로합니다.

Changelog를 참조하십시오

자신의 커스텀 클래스를 추가하십시오

Toast에서 사용자 정의 클래스를 사용하여 사용자 정의 (예 : 정보 또는 경고)를 사용하려면 다음과 같이 수행 할 수 있습니다.

 토스트 ({{
  텍스트 : "이것은 토스트입니다",
  ClassName : "Info",
  스타일 : {배경 : "선형 그레이드 (오른쪽, #00b09b, #96c93d)",
  }}). showtoast ();

여러 클래스는 클래스 이름 사이에 공백이있는 문자열로 지정될 수 있습니다.

오프셋을 추가하십시오

토스트에 오프셋을 추가하려면 다음과 같이 할 수 있습니다.

 토스트 ({{
  텍스트 : "이것은 오프셋이있는 토스트입니다",
  오프셋 : {x : 50, // 수평 축 - 숫자 또는 통일을 나타내는 문자열 일 수 있습니다. 예 : '2em'y : 10 // 세로 축 - 숫자 또는 통일을 나타내는 문자열 일 수 있습니다. 예 : '2em'
  },}). showtoast ();

토스트는 X 축에서 오른쪽에서 50px를, Y 축에서 상단에서 10px로 밀립니다.

메모:

position left 에 해당하면 왼쪽에서 푸시됩니다. gravity bottom 에 같으면 바닥에서 밀려 나옵니다.

API

옵션 키	유형	용법	기본값
텍스트	끈	토스트에 표시되는 메시지	"안녕하세요!"
마디	요소 _node	토스트 내부에 장착 할 노드를 제공하십시오. `node` `text` 보다 우선 순위가 높습니다
지속	숫자	토스트를 표시 해야하는 기간. 영구 토스트의 경우 -1	3000
선택자	문자열 \| 요소 _node	섀도우 루트	토스트를 추가 해야하는 CSS 선택기 또는 요소 노드
목적지	URL 문자열	토스트 클릭시 브라우저를 탐색 해야하는 URL
Newwindow	부울	새 창에서 `destination` 열어야하는지 여부를 결정합니다.	거짓
닫다	부울	닫기 아이콘을 보여주기 위해	거짓
중력	"상단"또는 "하단"	위 또는 아래에서 토스트를 보여줍니다	"맨 위"
위치	"왼쪽"또는 "오른쪽"	왼쪽 또는 오른쪽에 토스트를 표시합니다	"오른쪽"
배경 검색	CSS 배경 값	더 이상 사용되지 않으려면 `style.background` 옵션을 대신 사용하십시오. 토스트의 배경색을 설정합니다
화신	URL 문자열	텍스트 전에 표시 할 이미지/아이콘
클래스 이름	끈	추가 사용자 정의를 위해 사용자 정의 클래스 이름을 제공하는 기능
Stoponfocus	부울	토스트 위로 호버링 될 때 타이머를 중지하려면 (지속 시간이 설정된 경우에만)	진실
콜백	기능	토스트가 기각 될 때 호출
onclick	기능	토스트를 클릭하면 호출됩니다
오프셋	물체	축에 오프셋을 추가하는 기능
ESCAPEMARKUP	부울	HTML 마크 업을 피하는 기본 동작을 전환합니다	진실
스타일	물체	HTML DOM 스타일 속성을 사용하여 토스트에 직접 스타일을 추가하십시오.
arialive	끈	옵션은 https://developer.mozilla.org/en-us/web/accessible/aria/aria_live_regions를 참조하십시오.	"예의 바른"
Oldestfirst	부울	토스트가 페이지에 쌓이는 순서를 설정합니다.	진실

더 이상 사용되지 않은 속성 : backgroundColor style.background 옵션을 대신 사용하십시오

브라우저 지원

IE / 엣지	파이어 폭스	크롬	원정 여행	오페라
IE10, IE11, Edge	지난 10 버전	지난 10 버전	지난 10 버전	지난 10 버전

기고자

astoker	Caiomoura1994	rndevfx	1ess	D4RN0K	Danielkaiser80
skjnldsv	Chasedeanda	Chrisgraham	와치 위	feixuruins	개빈 하리
Haydster7	Joaquinwojcik	Juliushaertl	mort3za	Sandip124	타다 다
T12UNG	Victorfeijo	피아 jaf	Prousseau-korem