Tabs

Getting Started

npm 및 cdn 방식으로 로드하기 프로젝트에 triplexlab 가져오는 방법에는 몇 가지 옵션이 있습니다.

npm i triplexlab

<script src="https://unpkg.com/triplexlab/dist/Actives.min.js"></script>

자세한 로드 방식은 여기를 참고하세요

아래와 같은 예시를 확인해 보세요.

클릭하여 해당 부분을 활성화, 비활성화 시키는 것을 쉽게 컨트롤 할수 있습니다. 원하는 addClassName 값을 추가하여 .css에서 컨트롤 할수 있습니다. 직접 하단에 있는 stackbitz 사이트를 확인해 보세요.

다음과 같은 옵션으로 사용할수 있습니다.

HTML

<ul>
    <li class="tab tab_js">A</li>
    <li class="tab tab_js">B</li>
    <li class="tab tab_js">C</li>
    <li class="tab tab_js">D</li>
    <li class="tab tab_js">E</li>
</ul>

JavaScript

<script>
const my = new tr.Tabs ({
    targets: '.tab_js',
    addClassName: 'actives',  // 넣고 싶은 클랙스 명
    firstItemActive: true,    // 첫번째 아이템을 활성화 할건지 여부체크 true or false
});
</script >

👉🏻예시확인

stackblitz 사이트 확인하기