Toast

Simple toast message

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 | |