vazil-commons

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

Table of Contents

• vazil-commons
  • Table of Contents
  • Installation
  • Usage
    • Global
    • Local
    • Props
    • Events
    • Slots
  • Development
  • License
    • Vazildialog 명세 (props)
    • Vazildialog 명세 (slots)

Installation

npm install vazil-commons

Usage

Global

Local

Props

| 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 항목 리스트

Events

Slots

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

Development

To begin development, run:

npm install
npm run dev

License

Vazildialog 명세 (props)

| 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가 자동으로 닫힐지 여부

Vazildialog 명세 (slots)

| Property | Type | Default | Description | |:--------------------------|:----------------|:------------|:------------------------------| Slot 설명 loadBtn 로드 버튼의 콘텐츠 title 제목의 콘텐츠 content 대화상자 콘텐츠의 콘텐츠 actionBtn 액션 버튼의 콘텐츠