0.0.7 • Published 9 months ago
@daracl/toast v0.0.7
Toast
Simple toast message
Browser Support
 |  |  |  |  |  |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | ie 11 > |
build
npm run build사용방법
Daracl.toast.create({ items: [{ text: '한글임 <br/>asdfwef' }], style: 'success', duration: 3, position: { vertical: 'top', horizontal: 'left' } })
Daracl.toast.create({ items: ['awseawefawefawefaweff <br/>asdfwef', '한글임한글임한글임ㄴㄴㄴㄴ'], style: 'primary', duration: 10, position: { vertical: 'top', horizontal: 'center' } })
var toastObj = Daracl.toast.create({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], keepInstance: true, style: 'secondary', duration: 3, position: { vertical: 'top', horizontal: 'right' } })
Daracl.toast.create({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'warning', duration: 10, position: { vertical: 'middle', horizontal: 'left' } })
Daracl.toast.create({ items: [{ text: 'awseawefawefawefaweff <br/>asdfwef'}, 'test'], style: 'success', duration: 5, position: { vertical: 'middle', horizontal: 'center' } })
Daracl.toast.create({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'info', duration: 10, position: { vertical: 'middle', horizontal: 'right' } })
Daracl.toast.create({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'danger', duration: 10, position: { vertical: 'bottom', horizontal: 'left' } })
Daracl.toast.create({ items: ['awseawefawefawefaweff <br/>asdfwef', 'test'], style: 'success', duration: 10, position: { vertical: 'bottom', horizontal: 'center' } })
Daracl.toast.create({ 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 |