Programing

vuetify 글꼴 크기 변경

c10106 2022. 5. 20. 21:17
반응형

vuetify 글꼴 크기 변경

나는 새로 부에티비시를 사용하고 있다.의 글꼴 크기를 변경하고 싶다.<v-radio>단추와 레이블.css 직접 적용이 작동하지 않음.그래서 몇 가지 답을 찾아봤지만, 그 답은 매우 짧다.그걸 적용할 수 없어.부비에서 글꼴 크기를 어떻게 바꾸는지 설명해줄 사람 있어?티아

업데이트됨:

<template>
<v-flex xs6>
    <p class="title-input">Jenis Kelamin</p>
    <v-radio-group id="id-gender" class="no-space" v-model="genderSelect" :mandatory="false" row @change="genderAction">
       <v-radio class="gender" label="Pria" value="Pria"></v-radio>
       <v-radio class="gender" label="Wanita" value="Wanita"></v-radio>
    </v-radio-group>
    <span class="text-error" v-show="genderError">Mohon diisi</span>
</v-flex>
</template>

<style scoped src="../style/Shortform.css">

</style>

정답이 나왔어.내 css 파일에서 내가 해야 할 일은

.customClass >>> label

그 >>>> 아이콘을 추가하면 문제가 해결되었다.

에서 스타일 태그를 사용하려면.vue파일: 제거할 수 있는 옵션scoped스타일 태그에서 직접 레이블을 대상으로 지정.

<style>
  .v-label {
    font-size: desired size
  }
</style>

만약 당신이 별개의 것을 가지고 있다면.css파일 당신은 여전히 이 방법을 사용할 수 있고 그리고 무시 할 수 있다.<style>꼬리표를 달다

.v-label {
  font-size: desired size
}

이 일은 내게 효과가 있었다.

.small-radio i {
  font-size: 19px;
}
.small-radio label {
  font-size: 14px;
  padding-left: 0px;
  margin-left: -4px;
}
.small-radio .v-radio {
  padding: 0px;
}
.small-radio [class*="__ripple"] {
  left: 0;
}

추가하다v-deep::징발하면 모욕을 주다

스타일 추가v-radio-group:

<v-radio-group class="small-radio" v-model="radioGroup">
   <v-radio
    ...
   ></v-radio>
</v-radio-group>

참조URL: https://stackoverflow.com/questions/49421170/change-font-size-of-v-radio-vuetify

반응형