Vuetify

• vue에서 사용할 수 있는 Ul라이브러리
  https://vuetifyjs.com/en/
  https://vuetifyjs.com/en/getting-started/wireframes/

1. 설치

1)

npm install vuetify

2)

npm install @mdi/font

2. 셋팅(main.js)

import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles' // Vuetify 스타일을 임포트
import '@mdi/font/css/materialdesignicons.css' // Material Design Icons

const vuetify = createVuetify({
    icons: {
        iconfont: 'mdi', // 'mdi'는 Material Design Icons
    },
})


const app = createApp(App)
app.use(vuetify) // Vuetify를 사용

app.mount('#app')

3. 태그 및 속성

1) v-app(테마 관리)

• 애플리케이션 루트 Component로 사용
  (모든 Vuetify Component는 v-app 내부에 있어야 한다)
• id, dark, light 등이 있어 애플리케이션 테마 관리

2) v-btn(클릭 버튼)

• color : 버튼 색상
• disabled : 버튼 비활성화
• icon : 아이콘 생성
• size : 버튼 크기

3) v-text-field(글자 입력 바)

• label : 필드 레이블 지정
• v-model : 입력값과 데이터 양방향 바인딩
• icon : 입력 필드에 아이콘 추가
• type : 입력필드 타입 지정(text, password, email 등)

4) v-navigation-drawer(사이드바 메뉴)

• app : 해당 태그를 앱 레이아웃에 통합
• fixed : 위치 고정
• value : 가시성 제어

5) v-toolbar(툴바)

• flat, dense, prominent : 스타일, 크기 조절
• color : 색상
• dark, light : 테마 지정

6) v-list(리스트, 리스트 아이템 생성)

• dense : 밀도 조절
• subheader, three-line, two-line: 한 리스트 내 줄 수 설정
• group : 리스트 하위 그룹 생성

7) v-card(정보를 담을 카드)

• elevation : 그림자 깊이
• hover : 마우스 오버시 카드 스타일 변경

8) v-data-table(데이터 테이블 생성)

• 정령, 검색, 페이지네이션 등 기능 지원
• items : 테이블에 표시될 항목 배열
• headers : 테이블 헤더 정보를 포함한 객체 배열
• search : 테이블 검색할 키워드
• sort-by, sort-desc : 정렬 설정

9) v-dialog(모달창)

• 사용자 알림, 확인, 입력요청 등 사용
• v-model : 대화상자 가시성 제어
• persistent : 대화상자 외부 클릭에도 닫히지 않도록 함

10) v-icon(아이콘 표시)

• Material Icons, FontAwesome등 아이콘 라이브러리 지원
• color : 색상
• size : 크기

11) v-slider(값 범위 선택할 슬라이더)

• v-model : 현재 슬라이더 값 양방향 바인딩
• min, max : 슬라이더 최소, 최대값 설정
• step : 슬라이더 단계값 설정

12) v-select(드롭다운 선택메뉴)

• items : 선택가능 항목 배열
• v-model : 선택 항목 값 양방향 바인딩
• multiple : 여러 항목 선택 가능