Vuetify 정리

Materialize

• Vuetify의 근간이 된다.
• 12열 반응형 그리드 시스템
• container 클래스를 통해 너비의 70% 본문 사용
• small은 모바일, med는 태블릿, large는 PC 의미
• truncate 긴 텍스트를 자르면서 줄임표로 표시

기본 레이아웃 구성

레이아웃 구성시 아래 구성이 필요하다.

<v-app> 
  // 헤더
  <v-navigation-drawer app></v-navigation-drawer>
  <v-toolbar app></v-toolbar>
  // 본문
  <v-content>
    <v-container>
      // 내용
      // 그리드
      <row>
        <col>
          // 그리드 cell 내용
        </col>
      </row>
    </v-container>
  </v-content>
</V-APP>

cards 컴포넌트

• 패널부터 스태틱 이미지까지 어떤 것이든 쓸 수 있는 다재다능한 컴포넌트
• v-card-title, v-card-subtitle, v-card-text and v-card-actions 로 구성
• v-carousel 을 이용하여, 여러 컨텐츠를 보여줄 수 있다.
• Card components - Vuetify.js

lists 컴포넌트

• 정보 표시에 주로 사용되며 avatar, 내용, actions, 부제목 등에 사용된다.
• List components - Vuetify.js

• 예시 구성 코드

  <v-list>
  <v-subheader>리스트 그룹 제목</v-subheader>
  <v-list-item-group>
  <v-list-item>
    <v-list-item-content>
      <v-list-item-title> 리스트 아이템1 제목</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
  <v-list-item>
    <v-list-item-content>
      <v-list-item-title> 리스트 아이템2 제목</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
  </v-list-item-group>
  </v-list>

typography 및 폰트 스타일

• .display-4 ~ 1 , .headline , .title 등이 있다.
• Application typography - Vuetify.js

etc

• 사이트경로를 나타내는 breadcrumbs
• 스크린 바닥에서 슬라이드되는 메뉴 bottom-sheets
• 개별 요소에 대한 알림에 사용되는 badge
• 작은 태그형태로 버튼, 텍스트
• 이미지 등에 사용되는 chips
• 버튼달림 팝업창 dialog
• 자동완성 기능 autocompletes
• 이외 각종 form UI 제공.

참고

네이버 블로그(181113. 정보정리 - Vuetify)