[ Sweetalert ]

 

 

 

 

 

 

 

 

 

 

시작하기에 앞서

Sweetalert의 전체적인 개념을 파악하고 

자주 사용하는 부분의 내용을 정리했다.

세부적인 사항은 링크된 Sweetalert 사이트를 참조.

 

 

 

 

 

 

 

 

 

Sweetalert 참조 사이트

https://sweetalert2.github.io/

SweetAlert2

 

 

 

 

 

 

 

 

 

 

 

Sweetalert 라이브러리 추가하기.

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

라이브러리 추가하기 참조링크

https://sweetalert2.github.io/#download

SweetAlert2

 

 

 

 

 

 

 

Bootstrap의 영향을 받는 경우 처리.

Bootstrap의 영향을 받아서 Sweetalert창이 작아진 경우에는 

창의 크기를 다시 조절해 주면 된다. 

.swal2-popup{
	font-size : 17px;
}

위 내용을 CSS파일에 적용한다. 

 

 

 

 

 

 

 

 

 

기본 알림창 만들기.

Swal.fire({ 
	icon: 'success', 
	title:"성공 창" , 
	html: "<div>성공하셨습니다~ </div>" , 
});

title은 알림창의 제목 , html은 내용이다. 

 

 

 

 

 

 

 

 

 

 

알림창 종류 변경하기. 

icon 속성값을 변경하면 알림창의 종류가 변경된다.  (구버전에서는 type속성)

알림창의 종류에는 success , info , warning , error 가 있다. 

성공창

Swal.fire({ 
	icon: 'success', 
	title:"성공 창" , 
	html: "<div>성공하셨습니다~ </div>" , 
});

알림창

Swal.fire({ 
	icon: 'info',
	title:"알림창" ,
	html: "<div>무슨일인지 알려주기 ~  </div>" ,
});

경고창

Swal.fire({ 
	icon: 'warning', 
	title:"경고창" , 
	html: "<div>문제가 발생했습니다 ~  </div>" , 
});

에러창

Swal.fire({ 
	icon: 'error', 
	title:"에러창" , 
	html: "<div>이것은 에러입니다  </div>" , 
});

 

 

 

 

 

 

 

 

 

 

 

 

버튼 제어하기.

Confirm 버튼 text 변경하기. 

confirmButtonText 속성을 사용해서 text를 변경할 수 있다. 

Swal.fire({ 
	icon: 'success', 
	title:"성공 창" , 
	html: "<div>성공하셨습니다~ </div>" , 
    
	confirmButtonText: '확인', 
});

Confirm버튼 없애기.

Swal.fire({ 
	icon: 'success', 
	title:"성공 창" , 
	html: "<div>성공하셨습니다~ </div>" , 
    
	showConfirmButton: false,
});

Cancel 버튼 생성 및 text 변경하기.

Swal.fire({ 
	icon: 'success', 
	title:"성공 창" , 
	html: "<div>성공하셨습니다~ </div>" , 
    
	showCancelButton: true,
	cancelButtonText: '취소', 
});

Close 아이콘 생성하기

Swal.fire({ 
	icon: 'success', 
	title:"성공 창" , 
	html: "<div>성공하셨습니다~ </div>" , 
    
	showCloseButton: true,
});

 

 

 

 

 

 

 

 

 

 

기본 제어 옵션.

창 지속시간 설정하기.

timer: 1300,

창 위치 지정하기.

position: 'middle',

창의 위치는 ( top , middle , bottom ) , ( start , end )로 설정할 수 있다.

창 작게 만들기.

toast: true,

외부 클릭 금지시키기.

sweetalert창 이외에는 클릭이 금지 된다. 

allowOutsideClick: false ,

ESC키 사용금지.

allowEscapeKey: false ,

Enter키 사용금지.

allowEnterKey: false ,

 

 

 

 

 

 

 

 

 

 

라이프사이클 제어하기.

Swal.fire({ 
	icon: 'success', 	
	title:"라이프사이클 관련 함수 테스트" ,   
	html: "<div>콘솔을 확인해보세요 ~~</div>" ,  
	
	
	willOpen: function () { 
		console.log('willOpen');
	},
	
	didOpen: function () { 
		console.log('didOpen');
	},

	willClose : function() { 
		console.log('willClose');
	},
	
	didClose : function() { 
		console.log('didClose');
	},
	
});

창 열리기 전 willOpen , 창 열린 후 didOpen

창 닫히기 전 willClose , 창 닫힌 후 didClose

 

 

 

 

 

 

 

 

 

 

 

잠깐 알리고 종료되는 창 만들기.

Swal.fire({
	title: '작업 성공',
	icon: 'success',
    
	showConfirmButton: false, 
	position: 'middle', 
	timer: 1300, 
	toast: true, 
});

창을 제어하는 옵션들을 조합해서 잠깐 알리고 종료되는 창을 구성할 수 있다.

 

 

 

 

 

 

 

 

 

 

작업중 창 만들기.

Swal.fire({
	title: '작업 중',
	showConfirmButton: false, 	
	allowOutsideClick: false , 
	allowEscapeKey: false , 
	allowEnterKey: false, 
	timer: 3000, 
	
	willOpen: function () {
		Swal.showLoading();
	},
});

Swal.showLoading() 함수를 사용하면 작업중 모션이 실행된다. 

 

 

 

 

 

 

 

 

 

 

 

진행 상태 창 만들기.

Swal.fire({
	title: 'Auto close alert!',
	html: 'I will close in <b></b> milliseconds.',
	timer: 1000,
	timerProgressBar: true,
	 
	didOpen: () => {
		Swal.showLoading()
		const b = Swal.getHtmlContainer().querySelector('b')
		timerInterval = setInterval(() => {
			b.textContent = Swal.getTimerLeft()
		}, 100)
	},
	
	willClose: () => {
		clearInterval(timerInterval)
	}
  
}).then((result) => {
	 /* Read more about handling dismissals below */
	 if (result.dismiss === Swal.DismissReason.timer) {
	   console.log('I was closed by the timer')
	 }
})

timer를 통해서 진행 시간을 조절할 수 있다. 

 

 

 

 

 

 

 

 

 

 

확인 & 취소에 따라 작업하기.

Swal.fire({
	html: '작업을 수락하시겠습니까?',
	type: 'info',
	confirmButtonText: '확인',
	cancelButtonText:  '취소',
	showCancelButton: true,
	allowEnterKey: false,
}).then(function (choose_confirm ) {
	
	if(choose_confirm.value){
    	console.log('확인을 선택하셨습니다.');
	}else{
    	console.log('취소를 선택하셨습니다.');
	};
	
});

 

 

 

 

 

 

 

 

 

 

 

데이터 입력 받아서 사용하기.

Swal.fire({
	
	title: '입력창',
	type: 'info',
	confirmButtonText: '확인',
	cancelButtonText:  '취소',
	showCancelButton: true,
	allowEnterKey: false,
	allowOutsideClick: false ,
	
	// 사용자로 부터 입력받기. 
	input: 'text',
	inputLabel: '이름을 입력하세요',
	inputValidator: function( value ){
		if (!value) {
			return '값을 입력해주세요.';
	    }else{
			alert(value);
	    }
	}
	
});