vuetify3 gradient 적용법

안녕하세요, 인프런 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를 적용할 수 있습니다.

도움이 되었길 바랍니다. 감사합니다.

인프런 커뮤니티 질문&답변