[Vue]v-list-tile active class, background-color

vue의 v-list-tile에는 active-class Props가 있다.

해당 리스트 타일이 선택되었을때 자동으로 해당 class가 달리고, css를 해당 클래스로 입히는것 같다.

이러한 active-class를 사용자 정의 class를 추가할 수 있고, 사용자 정의 class에 따라 다른

css를 부여 할 수 있게 된다.

(디폴트가 primary--text 인데, 디폴트 클래스로 css를 수정하면 모든 v-list-tile에 css가 동일하게 적용되어 난감한 상황이 발생 할 수 있다.)

props 주는 방법은 다행히도 그냥 클래스 목록을 쭈욱 쓰면 되는듯..


  <v-list-tile active-class="primary--text menu">


vuetify에서도 primary--text 클래스를 기본적으로 같이 추가하는것을 권고 하고 있어서, 그 뒤에 원하는 클래스를 추가하면 된다.

그리고 스타일 태그 내에서 해당 클래스로 css를 부여하면 된다.


.menu {
    border-right-color: #d5d8dc;
    border-right-style: solid;
    background-color: #f8f9f9;
    color: black !important;
  }


추가적으로, 선택된 리스트의 background 컬러를 모두 동일하게 바꾸고 싶으면 active 클래스 앞에 a 태그를 붙이도록 하자. (크롬으로 확인하니 a태그가 붙더라..)

  a.primary--text {
    background-color: #f8f9f9;
  }