Dara-toast NPM

Toast

Simple toast message

npm

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

build

npm run build

사용방법

new Toast({ items: [{ text: '한글임 <br/>asdfwef' }],  style: 'success', duration: 3, position: { vertical: 'top', horizontal: 'left' } })
new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', '한글임한글임한글임ㄴㄴㄴㄴ'], style: 'primary', duration: 10, position: { vertical: 'top', horizontal: 'center' } })
var toastObj = new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], keepInstance: true, style: 'secondary', duration: 3, position: { vertical: 'top', horizontal: 'right' } })

new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'warning', duration: 10, position: { vertical: 'middle', horizontal: 'left' } })
new Toast({ items: [{ text: 'awseawefawefawefaweff <br/>asdfwef'}, 'test'], style: 'success', duration: 5, position: { vertical: 'middle', horizontal: 'center' } })
new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'info', duration: 10, position: { vertical: 'middle', horizontal: 'right' } })

new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'danger', duration: 10, position: { vertical: 'bottom', horizontal: 'left' } })
new Toast({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'success', duration: 10, position: { vertical: 'bottom', horizontal: 'center' } })
new Toast({ items: [{ text: 'awseawefawefawefaweff <br/>asdfwef', title: 'title', duration:3 }, '한글임한글임한글'], style: 'success', duration: 5000, position: { vertical: 'bottom', horizontal: 'right' } })

toast 옵션

key	설명	기본값	옵션값
duration	유지 시간(단위 초)	3
width	넓이	''
position	위치	vertical: 'top' horizontal: 'right'	top, middle, bottom left, center, right
enableCloseButton	닫기 버튼 활성화여부	true
style	백그라운드 스타일	'success'	'primary', 'secondary' , 'info' , 'success' , 'warning' , 'danger'
textColor	글자 색	'#000000'
enableProgress	프로그래스 바 사용여부	true
keepInstance	show 가 끝나도 toast 객체를 유지 toast 객체 하나 생성해서 계속 사용할 경우 사용	false

toast item 옵션

key	설명	기본값	옵션값
title	제목	''
enableCloseButton	닫기 버튼 활성화여부	true
style	백그라운드 스타일	'success'	'primary', 'secondary' , 'info' , 'success' , 'warning' , 'danger'
textColor	글자 색	'#000000'
enableProgress	프로그래스 바 사용여부	true