Vuetify Layout 연습하기 #2

· 6년 전 · 3246
<v-flex d-flex xs12 order-xs5>
<v-flex d-flex xs12 sm2 child-flex>

d-flex: d-{ type}  type: flex/inline-flex/block 등으로 설정 가능함.

  매뉴얼상으로는 d-flex는 v-container와 v-layout에만 적용됨

  child-flex도 매뉴얼 상으로는 없음

 

마지막에 있는 2개의 d-flex는 없애면 화면이 달라짐.

 

xs12는 제일 작은 사이즈 이상에도 무조건 12그리드 차지하게

order-xs5 도 오더 순서를 무조건 5번째로. (order-(size)(1-12)

xs12 sm2는 스몰이상에는 2개씩 자리 잡고,  제일 작은 화면에서는 한개로..

 

https://vuetifyjs.com/en/framework/breakpoints#breakpoints

 

203892234_1549405559.8156.jpg

https://vuetifyjs.com/en/components/cards

 

<v-card color="blue-grey" dark tile flat>

 

dark:  테마를 Dark로 배경이 어둡게,  글자를 하얀색으로.

tile:  border-radius를 없앰.  tile이 없을 때 border-radius: 2px

flat:  card box shadow를 없앰. 아래의 box-shadow 모두가 0px로...

203892234_1549466460.8141.jpg

color: 머트리얼 칼라로도 지정이 가능함. success, info, error, warning등

 

<v-card-text>{{ lorem }}</v-card-text>

 

v-card-text는 Padding이 16이네요.  (이것을 조정하는 방법은?)

203892234_1549406701.2683.jpg

 

일단 안되면 div로 변경해서 아래는 v-card-text와 같은 패딩입니다.

<div class="pa-3">{{ lorem }}</div>

 

v-card-text의 디폴트 폰트 사이즌 14px

v-card-title은 14px 입니다

 

https://vuetifyjs.com/en/framework/typography#font-sizes

 

203892234_1549409185.5021.jpg

|
댓글을 작성하시려면 로그인이 필요합니다. 로그인

JS프레임워크

+
분류 제목 글쓴이 날짜 조회
Vue 6년 전 조회 1,454
React 6년 전 조회 1,631
Vue
[Vue]
6년 전 조회 1,173
기타 6년 전 조회 2,108
기타 6년 전 조회 1,444
Vue 6년 전 조회 1,491
Vue 6년 전 조회 1,379
기타 6년 전 조회 1,275
기타 6년 전 조회 1,360
Vue 6년 전 조회 1,274
기타 6년 전 조회 1,489
Vue 6년 전 조회 3,748
Vue 6년 전 조회 3,517
기타 6년 전 조회 1,443
Vue 6년 전 조회 3,247
Vue 6년 전 조회 6,997
Vue 6년 전 조회 1,733
Vue 6년 전 조회 1,353
Vue 6년 전 조회 925
Vue 6년 전 조회 1,403
Vue 6년 전 조회 935
Vue 6년 전 조회 1,070
Vue 6년 전 조회 923
Vue 6년 전 조회 918
Vue 6년 전 조회 770
Vue 6년 전 조회 1,064
Vue 6년 전 조회 719
Vue 6년 전 조회 703
Vue 6년 전 조회 890
Vue 6년 전 조회 708
🐛 버그신고