vuetify3 gradient 적용법
804
11 asked
안녕하세요, vuetify 강의 정말 잘듣고 있습니다
지금 시점에 vuetify3 버전이 출시되어 강의를 보면서 조심씩 수정하며 따라가고 있는데요,
도저히 v-navigation-drawer의 이미지에 gradient가 적용이 안되어 질문올립니다,,
분명히 공식문서에도 gradient: string 으로 되어있는데 강의에서 적어주신 방법대로 따라하니 적용이 안됩니다.
스타일로 지정을 하니 아이콘 위로 어두워져서 아이콘이 잘 안보이구요ㅜ
vuetify3버전에서는 어떻게 적용하면 될까요?
Answer 1
2
안녕하세요, 인프런 AI 인턴이에요.
v-navigation-drawer의 이미지에 gradient 적용이 안되는 문제로 고민하고 계시군요.
vuetify3 버전에서 gradient를 적용하는 방법은 이전 버전과 비슷합니다. 다만, 이전과는 다르게 CSS 변수 사용을 권장합니다.
우선, v-navigation-drawer에 gradient를 적용할 경우 아래와 같이 스타일 속성으로 지정해 줄 수 있습니다.
<v-navigation-drawer
...
:style="{ background: 'linear-gradient(to bottom, #ffffff, #000000)' }"
>
...
</v-navigation-drawer>
그리고, vuetify3 버전에서는 v-theme 기능이 추가되어 글로벌로 선언된 테마에도 gradient를 적용할 수 있습니다. 이때, 테마에서 사용되는 CSS 변수를 사용해야 합니다.
예를 들어, vuetify3 기본 테마에서 primary 색상에 gradient를 추가하려면 아래와 같이 테마 설정 파일에서 변수를 선언하고, 컴포넌트의 스타일 속성에서 해당 변수를 사용합니다.
// theme.scss
$primary-gradient: linear-gradient(to bottom, $primary, $primary-lighter, $primary-lightest);
$theme: {
themes: {
light: {
primary: #1976D2,
// ...
}
}
}
// MyComponent.vue
<style lang="scss">
.my-style {
background: var(--v-gradient-primary);
}
</style>
위 코드에서 --v-gradient-primary는 vuetify3에서 제공하는 primary 색상에 gradient가 적용된 CSS 변수입니다. 이 변수를 이용하면 vuetify3 글로벌 테마에서도 gradient를 적용할 수 있습니다.
도움이 되었길 바랍니다. 감사합니다.
인가 코드 발급(프론트 vs 백)
0
28
2
tailwind css 적용 잘 안되면 참고하세요.
0
25
1
질문드립니다.
0
32
0
unplugin-vue-components 질문드립니다.
0
37
2
강의듣다가 헷갈려서 질문드립니다.
0
31
1
와 짐코딩님 강의 들으면서 느끼는게 많네요.
0
32
1
질문드립니다.
0
32
2
npm init vue@3.1.9
0
41
2
크롭 웹스토어 vue devtools 설치 관련
0
42
1
카카오 클라이언트 시크릿
0
196
2
snippets 작성하는 부분 설명이 있었나요?
0
48
2
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
0
53
2
개발자 툴에서 Vue가 표시되지 않는 현상.
0
93
2
소스 공유 어디서 해야하는지 궁금합니다
0
60
2
component 등록과 사용
0
58
2
chrome 확장 devtools 버전 문제
0
81
1
파일 생성 방법이 다른건가요?
0
38
1
강의교안
0
56
2
Nuxt 4 관련 강의 업데이트 계획이 있으실까요?
0
74
2
Lottball.vue에서 궁금한점이 있어 질문드립니다.
0
49
0
라우터 인스톨 후 실행안됨
1
49
2
git 10k 저렇게 나와있는데,
0
217
1
궁금합니다 … ㅠ
0
529
1
export 'default' (imported as 'VueRouter') was not found in 'vue-router' 컴파일 오류 원인과 해결법 부탁드립니다.
0
1067
2