반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- v-select
- v-text-field height
- bucket cors
- Electron
- NUXT
- bucket max-key
- vuetifyjs
- sort
- electron-nuxt
- Android
- 동일 프로세스
- onsenui
- Vuetify
- xlsx
- f035d
- MySQL
- naver storage
- CSS
- error
- vuejs
- sequelize
- nodejs
- Vue
- onsen-ui
- kotlin
- c#
- naver storage bucket error
- 동일 프로그램
- JavaScript
- 프로세스 방지
Archives
- Today
- Total
앙큼한 개발기록
[vuetifyjs] v-text-field 높이값 조절 본문
내가 사용한 프레임 워크
vuetify v-text-field
https://vuetifyjs.com/en/components/text-fields/
이번에 처음으로 vuetify를 써보면서
프레임워크에서 선언된 컴포넌트들의 스타일을 바꾸는데
애를 많이 먹었다.
많이 바꾸는 것도 아니고 높이 조절이나 폭 조절, 색상 변경 등과 같이
기본적인 부분을 바꾸는 것도 하나하나 확인 하면서 고치기가 여간 힘들어
정리해 보고자 한다.
높이값을 조절하기 위해서는 global css에 아래의 css 를 적용하면 된다.
.v-text-field {
height: 33px; // 원하는 높이값
.v-input__control {
height: inherit;
.v-input__slot {
height: inherit;
min-height: initial; 고정된 높이는 이것 때문에 안먹음
}
}
}
배경 색은 v-text-field에 바로 적용하면 되고
input-box 안에 아이콘을 넣을 때
아이콘의 margin 값을 조절해야 된다.
.v-text-field {
background-color: #F3F6F9;
font-size: 14px;
.v-input__append-inner {
margin-top: 5px; // 내가 설정한 높이에 따른 마진
}
}
끝.
'개발 > vue & nuxt' 카테고리의 다른 글
[naver storage] bucket cors 오류 (0) | 2023.08.16 |
---|---|
[vuetifyjs] v-select 높이, 화살표 변경 (0) | 2023.06.22 |
[vue div resize] 내부 화면 크기 조절하기 (onResize library를 겸한) (0) | 2023.04.02 |
[vue/nuxt] xlsx file export (0) | 2023.02.06 |
Comments