📖

Update |

📤 Props List

필수 Props
Props List
이름설명기본값 (Type)
children
Modal에 출력되는 문자열 또는 컴포넌트를 출력합니다."" (String | Node)
show
Modal의 실행 여부를 결정하며, true가 전달되면 Modal이 실행됩니다.false (Boolean)
onCloseModal
Modal을 종료하기 위해 실행할 이벤트입니다.( ) => { } (Function)
id
모듈에 id 선택자 값을 지정합니다. id는 wrapper 태그에 적용됩니다."" (String)
className
모듈에 class 선택자 값을 지정합니다. className은 wrapper 태그에 적용됩니다."" (String)
name
Modal의 name 속성 값을 지정합니다.
지정된 name값은 wrapper 태그에 data-name 속성으로 적용됩니다.		"" (String)
modalSize
웹, 모바일 환경의 Modal 크기(width, height)를 직접 지정할 수 있습니다.
modalStyles와 함께 사용되면 modalSize가 우선순위를 가집니다.		{ width : "", height : "" } (Object)
mobileModalSize
모바일 환경(767px 이하)에서의 Modal의 크기(width, height)를 직접 지정할 수 있습니다.
mobileModalStyles와 함께 사용되면 mobileModalSize 우선순위를 가집니다.		{ width : "", height : "" } (Object)
modalStyles
Modal의 각각의 태그(wrapper, items, closeButton, contents)들의 스타일을 직접 적용할 수 있습니다.
설정된 스타일은 웹과 모바일 환경에 동일하게 적용됩니다.		{ wrapper : {}, itmes : {}, closeButton : {}, contents : {} } (Object)
mobileModalStyles
모바일 환경(767px 이하)내에 Modal의 각각의 태그(wrapper, items, closeButton, contents)들의 스타일을 직접 적용할 수 있습니다.{ wrapper : {}, itmes : {}, closeButton : {}, contents : {} } (Object)
showBGAnimation
true를 전달하면 Modal 실행/종료 시, 배경 애니메이션을 적용할 수 있습니다.false (Boolean)
showModalOpenAnimation
true를 전달하면 Modal 실행/종료 시, 실행/종료 애니메이션을 적용할 수 있습니다.false (Boolean)
hideCloseButton
true를 전달하면 Modal 닫기 버튼을 숨길 수 있습니다.false (Boolean)
closeMent
문자열을 전달하면 닫기에 대한 부가설명을 추가할 수 있습니다."" (String)
closeButtonInfo
닫기 버튼의 스타일을 직접 설정할 수 있습니다.

  • buttonSize : 버튼의 크기를 설정합니다.
  • buttonWeight : 버튼의 굵기를 설정합니다.
  • buttonColor : 버튼의 색상을 설정합니다.
{ buttonSize : 0, buttonWeight : 0, buttonColor : "black" } (Object)
offAutoClose
true를 전달하면 Modal 외부를 클릭해도 닫기 이벤트가 실행되지 않습니다.false (Boolean)
onAfterCloseEvent
Modal이 종료되는 시점 후(onCloseModal 함수 실행 후) 실행될 이벤트입니다.( ) => { } (Function)
autoCloseTimer
설정한 시간(Millisecond : 1/1000)이 지나면 Modal을 자동으로 종료시킬 수 있습니다.
예를 들어, 1초 후에 Modal을 종료하고 싶다면 1초의 Millisecond인 1000을 전달합니다.
1초(=1000) 미만의 숫자를 기입하면 실행되지 않습니다.		0 (Number)
onFixWindow
Modal이 실행될 때 화면 스크롤 이동을 방지할 수 있습니다.
설정된 Modal이 모두 종료되기 전까지 스크롤이 고정됩니다.		false (Boolean)

📂 Module Tree

태그를 클릭해보세요.