Vazil-commons NPM

vazil-commons

Vazil Company UI 공용 컴포넌트 라이브러리

npm install vazil-commons

Property	Type	Default	Description
clipped	Boolean	true	v-app-bar와 v-navigation clipped 설정
headerHeight	String, Number	50	헤더 height
logoHeight	String, Number	60%	헤더의 로고 height
darkThemeLogo	String	/logo/no-image.png	헤더 로고(dark theme) src
lightThemeLogo	String	/logo/no-image.png	헤더 로고(light theme) src
headerActiveList	Array	'theme', 'notification', 'profile'	헤더 아이템 활성화 리스트
userAvatarSrc	String	/logo/no-image.png	사용자 아바타 src
userName	String	이름	사용자 이름
userEmail	String	이메일	사용자 이메일
navList	Array	{key: '', icon: '', title: '', to: ''}	navigation 항목 리스트

Name	Description
headerItem	add header custom menu
navExpand_${navList item's key}	nav 확장 패널

To begin development, run:

npm install
npm run dev

Property	Type	Default	Description
persistent	Boolean	false	사용자가 밖을 클릭해도 대화상자를 계속 열어둘 것인지 여부
scrollable	Boolean	true	dialog 콘텐츠가 스크롤 가능한지 여부
fullscreen	Boolean	false	dialog를 전체화면으로 표시할 것인지 여부
fullOnlyMobile	Boolean	false	dialog를 모바일 장치에서만 전체화면으로 표시할 것인지 여부
width	String , Number	''	dialog의 너비
height	String , Number	''	dialog의 높이
minHeight	String , Number	200	dialog의 최소 높이
loadBtnIcon	String	''	로드 버튼에 표시할 아이콘
loadBtnText	String	'버튼'	로드 버튼에 표시할 텍스트
loadBtnVariant	String	'flat'	로드 버튼의 변형
loadBtnColor	String	'primary'	로드 버튼의 색상
title	String	'TITLE'	dialog의 제목
content	String	'내용'	dialog의 내용 text
bgColor	String	''	dialog의 배경색
yesBtnText	String	'확인'	"예" 버튼에 표시할 텍스트
noBtnText	String	'취소'	"아니오" 버튼에 표시할 텍스트
loading	Boolean	false	"예" 버튼이 로딩 상태인지 여부
disabledYes	Boolean	false	"예" 버튼이 비활성화되었는지 여부
disabledNo	Boolean	false	"아니오" 버튼이 비활성화되었는지 여부
autoClose	Boolean	false	"예" 버튼을 클릭하면 dialog가 자동으로 닫힐지 여부