q-input 컴포넌트 질문
466
작성한 질문수 1
q-input태그에서 약간의 굴곡을 적용하고싶은데 style을 따로 정의하여도 적용되지 않던데 다른 방법이 있을까요?
<template>
<q-page>
<q-input
label="Your Label"
outlined
class="rounded-input"
/>
</q-page>
</template>
<style scoped>
.rounded-input {
border-radius: 10px;
}
</style>
답변 1
1
안녕하세요 🙂
개발자도구에서 디버깅을 해보시면 실제 border-radius 를 담당하고 있는 요소는 파랑색 네모 박스로 체크한 요소인걸 확인할 수 있습니다. (스크린샷 참고)
하지만 수강생 분이 스타일을 위해 class를 적용한건 노랑색 박스이지요?
만약 변경하시려면 파랑색 박스로 감싼 요소를 변경해야 합니다.
<template>
<q-page>
<q-input
v-model="model"
label="Your Label"
outlined
class="rounded-input"
/>
</q-page>
</template>
<script setup>
import { ref } from 'vue';
const model = ref('');
</script>
<style>
.rounded-input.q-field--outlined .q-field__control {
border-radius: 30px;
}
</style>
ComboBox 관련해서 질문 드립니다.
0
69
2
<g-page class="q-pa-xl"> 했는데도 여백 안생김
0
83
2
quasar intellisense extension 관련 문의
0
263
2
q-tab 오류 문의
0
238
1
q-upload 문의 드립니다.
0
490
1
q-input과 :rules 속성을 함께 쓸때, items-center 속성이 이상한 현상
0
309
1
Key값으로 Object 사용가능할까요?
0
230
1
npm run build 시 오류 발생합니다
0
458
1
fontawsome 사용법
0
251
1
Quasar 관련 익스텐션
0
216
1
VUE를 이용해서 프로그램 파일을 실행할수 있을까요?
0
410
1
q-input 태그 내용사라짐
0
272
1
버튼이 마음대로 크기가 바뀌어요
0
655
1
다크 모드 처리 관련하여 질문드립니다.
0
532
1
script setup 태그 유무에 따라서 페이지 출력이 안됩니다.
0
542
3
vue3 composition api (script setup) 사용 시 전역변수 접근
0
1440
1
한글 실시간 바인딩
2
2532
2
vue3 composition Api 사용시 setup 내부에서도 /src/boot에 설정한 constatns.js 값을 가져올수 있나요?
0
396
1
router.push로 이동 시, 유튜브 페이지의 컨텐츠 영역 안보이는 현상
0
463
1
validation
0
365
1
CORS 설정
0
603
1
질문 있습니다
0
333
1
Helper Classes
0
309
1
Quasar 내장 컴포넌트 색 질문입니다.
0
442
1