Aurora Modules

ShopbyTabs

탭을 이용한 상품 진열 컴포넌트입니다. API 등 활용없이 자유롭게 이용가능합니다.

모듈명: shopby-tabs원본소스

탭을 이용한 상품 진열 컴포넌트입니다. API 등 활용없이 자유롭게 이용가능합니다.

사용 가능 변수

변수명	타입	기본값	설명
currentTab	string	""	현재 선택된 탭 `shopby-tab-value` attribute값이 들어갑니다.

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<shopby-tabs>
    <section>
        <h4 class="tab__title">shopby-tabs</h4>

        <ul class="tab" slot="tabs">
            <li>
                <a href="javascript:;">
                    {{!-- 실 사용시 아래 button태그의 class를 class="tab__btn {{#ifEq currentTab 'VALUE1'}}is-active{{/ifEq}}" 로 변경해주세요. --}}
                    <button class="tab__btn is-active" shopby-tab-value="VALUE1" shopby-on:click="TAB_CLICK">SKIN CARE</button>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <button class="tab__btn {{#ifEq currentTab 'VALUE2'}}is-active{{/ifEq}}" shopby-tab-value="VALUE2" shopby-on:click="TAB_CLICK">
                        COLOR MAKE UP
                    </button>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <button class="tab__btn {{#ifEq currentTab 'VALUE3'}}is-active{{/ifEq}}" shopby-tab-value="VALUE3" shopby-on:click="TAB_CLICK">
                        FACE MAKE UP
                    </button>
                </a>
            </li>
        </ul>

        <div class="tab__contents" slot="content">
            {{!-- 실 사용시 아래 button태그의 class를 class="tab__content tab__content--overflow {{#ifEq currentTab
            'VALUE1'}}is-active{{else}}is-inactive{{/ifEq}}" 로 변경해주세요. --}}
            <ul class="tab__content tab__content--overflow is-active">
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
            </ul>

            <ul class="tab__content tab__content--overflow {{#ifEq currentTab 'VALUE2'}}is-active{{else}}is-inactive{{/ifEq}}">
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
            </ul>

            <ul class="tab__content tab__content--overflow {{#ifEq currentTab 'VALUE3'}}is-active{{else}}is-inactive{{/ifEq}}">
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
            </ul>
        </div>
    </section>
</shopby-tabs>

<shopby-tabs>
    <section>
        <h4 class="tab__title">shopby-tabs</h4>

        <ul class="tab" slot="tabs">
            <li>
                <a href="javascript:;">
                    {{!-- 실 사용시 아래 button태그의 class를 class="tab__btn {{#ifEq currentTab 'VALUE1'}}is-active{{/ifEq}}" 로 변경해주세요. --}}
                    <button class="tab__btn is-active" shopby-tab-value="VALUE1" shopby-on:click="TAB_CLICK">SKIN CARE</button>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <button class="tab__btn {{#ifEq currentTab 'VALUE2'}}is-active{{/ifEq}}" shopby-tab-value="VALUE2" shopby-on:click="TAB_CLICK">
                        COLOR MAKE UP
                    </button>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <button class="tab__btn {{#ifEq currentTab 'VALUE3'}}is-active{{/ifEq}}" shopby-tab-value="VALUE3" shopby-on:click="TAB_CLICK">
                        FACE MAKE UP
                    </button>
                </a>
            </li>
        </ul>

        <div class="tab__contents" slot="content">
            {{!-- 실 사용시 아래 button태그의 class를 class="tab__content tab__content--overflow {{#ifEq currentTab
            'VALUE1'}}is-active{{else}}is-inactive{{/ifEq}}" 로 변경해주세요. --}}
            <ul class="tab__content tab__content--overflow is-active">
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample1.png" alt="오로라 수딩 세럼" width="250" />
                </li>
            </ul>

            <ul class="tab__content tab__content--overflow {{#ifEq currentTab 'VALUE2'}}is-active{{else}}is-inactive{{/ifEq}}">
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample2.png" alt="오로라 매트 립스틱" width="250" />
                </li>
            </ul>

            <ul class="tab__content tab__content--overflow {{#ifEq currentTab 'VALUE3'}}is-active{{else}}is-inactive{{/ifEq}}">
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
                <li class="tab__item">
                    <img src="https://shopby-images.cdn-nhncommerce.com/default/pro/product/auroraSample3.png" alt="오로라 쿨 파운데이션" width="250" />
                </li>
            </ul>
        </div>
    </section>
</shopby-tabs>

/* 여기에 스타일 코드를 작성해주세요. */