Home

오늘의 기억

[Vuetify] Vuetify 주요 Property 설명


Vuetify

Vuetify는 Vue를 사용하는 UI Framework이다.
공식 문서가 잘되어있으나, 한국어로 보게되면 description 같은게 번역이 안되서 아예 보이지가 않는다.
영어라도 보여줬으면 한국어로 볼 만 할텐데, 아예 공란이다보니 그냥 영어로 보는게 편한 것 같다.

Vuetify를 사용하다보면 component 들에서 대부분 공통적으로 사용하는 property 들이 존재한다.
하지만 그런 property 들은 이름만 가지고는 어떤 기능을 하는지 헷갈릴때가 많다.
이 포스트에서는 그러한 공통 property 들에 대해 내용을 한 번 정리하고자 한다.


dark / light

darklight는 component 단위에 theme를 설정하는 property이다.
dark는 검은색 배경에 흰색 글씨, light는 흰색 배경에 검은색 글씨이다.
이 property는 Vuetify instance를 생성할 때 지정한 theme를 자동으로 따라가게 된다.
만약 component와 instance 모두 선언하지 않으면 light로 지정된다.

.theme--light {
  background-color: #fff;
  border-color: #fff;
  color: rgba(0,0,0,.87);
}

.theme--dark {
  background-color: #424242;
  border-color: #424242;
  color: #fff;
}

dense

Vuetify component 들은 대부분 위/아래 padding이 설정되어 있는데, 좀 큰 편이다.
v-alert component 기준으로 기본 값은 16px로 설정되어 있다.
dense property는 이러한 padding을 절반정도 줄여주는 역할을 한다.
기본값은 false 이다.

.dense {
  padding-top: 8px;
  padding-bottom: 8px;
}

tile

border-radius 속성을 없애주는 property이다.
즉, 둥근 테두리를 없애고 각진 테두리를 만들어준다.

.tile {
  border-radius: 0;
}

outlined

theme를 무시하고 배경 색상을 무조건 투명으로 변경한 뒤, 테두리를 얇게 변경한다.

.outlined {
  background: transparent!important;
  border: thin solid!important;
}

hover

component에 mouseover를 하면 약간 pop 되는 듯 한 그림자 효과를 주며,
cursor가 pointer로 변경된다.

.hover {
  cursor: pointer;
  transition: box-shadow .4s cubic-bezier(.25,.8,.25,1);
}

width, min-width, max-width

component의 width, min-width, max-width를 설정한다.
number와 string으로 설정 가능하며, number로 입력시 기본 단위는 px이다.
string으로 하면 단위까지 입력 가능하다.

vuetify는 기본으로 flexbox css를 이용하므로, 따로 width를 지정하지 않으면 내부 content에 자동으로 맞춰진다.


height, min-height, max-height

component의 height, min-height, max-height를 설정한다.
number와 string으로 설정 가능하며, number로 입력시 기본 단위는 px이다.
string으로 하면 단위까지 입력 가능하다.

vuetify는 기본으로 flexbox css를 이용하므로, 따로 height를 지정하지 않으면 내부 content에 자동으로 맞춰진다.


tag

component가 화면에 렌더링 될 때 어떤 태그로 렌더링 될 지 선택하는 속성이다.
기본 값은 component 마다 다르지만 보통 div 로 설정되어 있고,
span 이나, li 등으로 변경해서 사용하기도 한다.


추후에 추가할 내용이 생기면 업데이트 할 예정이다.
LastUpdated. 20191031.110000

20191030 Charyum.Park