뷰티파이 사용법 Vuetify Usage

[구글 머티리얼 디자인 아이콘]

https://fonts.google.com/icons

Google Fonts

[머티리얼 디자인 아이콘]

https://materialdesignicons.com/

Material Design Icons

---

[앱바]

<v-app-bar>앱바<v-app-bar>

[메뉴 아이콘]

<v-app-bar-nav-icon></v-app-bar-nav-icon>

 

[제목]

<v-toolbar-title>제목</v-toolbar-title>

[공간 구분]

<v-spacer></v-spacer>

[머티리얼 디자인 아이콘]

<v-btn icon><v-icon>mdi-dots-vertical</v-icon></v-btn> //세로 더보기 아이콘
//mdi-아이콘의 공식 이름

[기본 테마 7가지]

색상 이름	primary	secondary	accent	error	info	success	warning
색상값	#424242	#82B1FF	#FF5252	#2196F3	#2196F3	#4CAF50	#FFC107
색상	파란색	짙은 회색	콘플라워블루	빨간색	바다색	초록색	노란색

<v-app-bar app color="primary" dark fixed></v-app-bar>

[어두운 테마]

dark 어트리뷰트를 지정하면 글자색을 흰색으로 바꾼 후 테마와 글자의 명도를 자동으로 조정하여 가독성을 높인다.

[앱바 고정]

fixed 어트리뷰트를 지정하면 스크롤에 영향받지 않고 앱바의 위치를 고정한다.

---

[본문]

<v-content>내용</v-content>

[자동 여백]

<v-content><v-container>내용</v-container></v-content>

[타이포그래피 설정 옵션]

구분	용도	속성명	크기(단위: sp)
display	장식용 큰 글자	.display-1	34
		.display-2	48
		.display-3	60
		.display-4	96
headline	큰 제목	.headline	24
title	제목	.title	20
subheading	부제목	.subtitle-1	16
		.subtitle-2	14
body	본문	.body-1	16
		.body-2	14
caption	캡션	.caption	12
overline	개요	.overline	10

[엘리먼트 여백 설정 옵션]

속성(A)		방향(B)		크기(C)
m	바깥쪽 여백	t	top	0	$spacer*0	0px
		b	bottom	1	$spacer*0.25	4px
		l	left	2	$spacer*0.5	8px
p	안쪽 여백	r	right	3	$spacer*1	16px
		x	left, right	4	$spacer*1.5	24px
		y	top, bottom	5	$spacer*3	48px

[엘리먼트 여백 설정 예시]

.mt-3	바깥쪽 여백, top, 16px
.py-5	안쪽 여백, top, bottom, 48px
.mx-auto	바깥쪽 여백, left, right, 좌우 같은 여백

[이미지 넣기]

<v-img src="경로" aspect-ratio="2.3"></v-img>
//aspect-ratio 어트리뷰트를 지정하면 그림을 이미지의 가로:높이 비율에 맞춰서 자를 수 있다.

[카드 만들기]

<v-card max-width=400></v-card> //max-width의 단위는 px이다.

[카드에 텍스트 넣기]

<v-card><v-card-text>Hello, World!</v-card-text></v-card>

[그리드]

<v-row class="border-style">
  <v-col cols=12 class="border-style">12</v-col>
  <v-col cols=6 class="border-style">6</v-col>
  <v-col cols=3 class="border-style">3</v-col>
  <v-col cols=4 class="border-style">4</v-col>
</v-row>

<style>
  .border-style {
    border: 1px solid Black;
  }
</style>

v-row는 세로줄을 생성하고, v-col은 가로칸을 생성한다. cols값은 12가 최대값이고, 최대값을 넘어가면 자동으로 줄바꿈이 되어 들어간다. 위의 예제를 실행해서 결과를 봐야 바로 이해가 된다.

[그리드 내 정렬]

<v-col cols=12 align="left"></v-col>

[텍스트 정렬]

text-코드명-정렬명

코드명의 범위에 들어올 때만 정렬이 적용된다.

범위(픽셀)	0~599	600~959	960~1263	1264~1903	1904~
코드명	xs	sm	md	lg	xl
이니셜	eXtra Small	Small	MeDium	LarGe	eXtra Large
기기 종류	스마트폰	태블릿 PC	노트북	데스크톱	데스크톱 (와이드)

예)
text-sm-center: 태블릿 PC에서만 가운데 정렬을 한다.
text-center: 모든 범위에서 가운데 정렬을 한다.

[입력 받기]

<template>
  <v-main>
    <v-container>
      <v-text-field
        v-model="member_id"
        clearable
        type="number"
        label="사번"
        append-outer-icon="mdi-login-variant"
        v-on:click:append-outer="sendId"
        style="max-width: 400px;"
        counter=10
        max-length=10
      >
      </v-text-field>
    </v-container>
  </v-main>
</template>

<script>
  export default {
    methods: {
      sendId() {
        alert(this.member_id);
      }
    }
  }
</script>

[버튼]

  <v-btn block>Block Button</v-btn>

[드롭 박스]

<v-select></v-select>

 

[파일 다운로드]

<v-btn href="/file.pdf" download>Download PDF</v-btn>

---

[바닥글]

<v-footer color="primary" dark fixed><div class="mx-auto">바닥글</div><v-footer>

---

[display 설정]

class = "d-none"