vazil-layout-test

Vazil Company 프론트엔드 라이브러리 개발 프로토타이핑

Table of Contents

• Installation
• Usage
• Development
• License

Installation

npm install vazil-layout-test

Usage

Global

import Vue from 'vue';
import VazilLayout from 'vazil-layout-test/components/MyLayout.vue'
import 'vazil-layout-test/plugins/global'

Vue.component('VazilLayout', VazilLayout)

Local

import VazilLayout from 'vazil-layout-test/components/MyLayout.vue'
import 'vazil-layout-test/plugins/global'

export default {
  ...
  components: { VazilLayout }
  ...
};

Configuration

| 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 | [{icon: '', title: '', to: ''}] | navigation 항목 리스트

Development

To begin development, run:

npm install
npm run dev

License