programing

Vuetify를 사용하여 v-stepper-header 번호 제거

projobs 2022. 8. 9. 22:38
반응형

Vuetify를 사용하여 v-stepper-header 번호 제거

나는 이 문제를 해결하기 위해 모든 곳을 찾아봤지만 해결책을 찾지 못했다.이 번호를 삭제할 수 있는 방법이 있습니다.v-steppper-header- Vuetify 버전: 1.5.6

현재:

제외:

여기에 이미지 설명 입력

설정step끈을 비우다""다음과 같습니다.

  <v-stepper-step :complete="e1 > 1" step="" complete>Name of step 1</v-stepper-step>

위의 솔루션은 액티브/비액티브클래스와 스텝 식별에 문제를 일으킵니다.오늘 발견한 문제 해결 방법은 다음과 같습니다.

.your-stepper-deep ::v-deep .v-stepper__step{글꼴 크기: 0 }

이 문제를 해결할 임시 방법을 찾았습니다.이상적이지는 않지만 현재로선 원하는 결과를 얻을 수 있습니다.그리고 이것은 폰트를 투명하게 해서 배경색을 차지하게 하는 것입니다.그러면 스텝 번호가 표시되지 않고 스텝 기능이 켜져 있습니다.

.v-stepper__step--active:not(.v-stepper__step--complete) .v-stepper__step__step {
    color: transparent;
}
.theme--light.v-stepper .v-stepper__step:not(.v-stepper__step--active):not(.v-stepper__step--complete):not(.v-stepper__step--error) .v-stepper__step__step {
    display: none;
}

언급URL : https://stackoverflow.com/questions/57311618/remove-v-stepper-header-number-using-vuetify

반응형