tailwindcss

현재선택 목록 css 사용자 정의

땀모 2020. 1. 13. 21:23


exact 속성을 넣어주면 "/" 라우터에 색상제거 할 수 있음 

1
2
3
4
5
                           <ul>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/" exact>LOGO</router-link></li>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/logo-symbol">LOGO SYMBOL</router-link></li>
                             <li class="text-sm pb-4"> <router-link active-class="font-bold text-blue-500" to="/colors">COLORS</router-link></li>
                         </ul>
cs


하지만 더 간단하게 할 수 있다.


resources/js/routes.js


아래의 소스를 삽입하자

1
linkActiveClass: 'font-bold text-blue-500',
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import Logo from './components/Logo';
 
import LogoSymbol from './components/LogoSymbol';
 
import Colors from './components/Colors';
 
export default{
 
    mode : 'history',
 
    linkActiveClass: 'font-bold text-blue-500',
 
    routes:[
        {
            path: '/',
 
            component: Logo
        },
 
        {
            path: '/logo-symbol',
 
            component: LogoSymbol
        },
 
        {
            path: '/colors',
 
            component: Colors
        },
    ]
 
};
 
cs


결과는 위와 같다. 코드가 더 간결해진다.