SPSTRAP Document API

Base Tabs - Line

Base Tabs - Color

Hover : listener

Initialtab ( ex : 3 )

With effect

<div class="sp--tabs sp--css-notready"
                                tabs="lg-dark"
                                contents="3xl-dark"
                                data-tabevent="click"
                                data-initialtab="1"
                            >
                                <ul class="sp--tabs-controler">
                                    <li>탭 1</li>
                                    <li>탭 2</li>
                                    <li>탭 3</li>
                                    <li>탭 4</li>
                                </ul>
                                <ul class="sp--tabs-contents">
                                    <li>No effect 1</li>
                                    <li>No effect 2</li>
                                    <li>No effect 3</li>
                                    <li>No effect 4</li>
                                </ul>
                            </div>

<br />
                            <div class="sp--tabs sp--css-notready"
                                tabs="lg-dark"
                                contents="3xl-dark"
                                data-tabevent="click"
                                data-initialtab="2"
                                data-effect="to_fadein"
                            >
                                <ul class="sp--tabs-controler">
                                    <li>탭 1</li>
                                    <li>탭 2</li>
                                    <li>탭 3</li>
                                    <li>탭 4</li>
                                </ul>
                                <ul class="sp--tabs-contents">
                                    <li>Fade In 1</li>
                                    <li>Fade In 2</li>
                                    <li>Fade In 3</li>
                                    <li>Fade In 4</li>
                                </ul>
                            </div>
                            
                            <br />
                            <div class="sp--tabs sp--css-notready"
                                tabs="lg-dark"
                                contents="3xl-dark"
                                data-tabevent="click"
                                data-initialtab="3"
                                data-effect="to_slideup"
                            >
                                <ul class="sp--tabs-controler">
                                    <li>탭 1</li>
                                    <li>탭 2</li>
                                    <li>탭 3</li>
                                    <li>탭 4</li>
                                </ul>
                                <ul class="sp--tabs-contents">
                                    <li>Slide Up 1</li>
                                    <li>Slide Up 2</li>
                                    <li>Slide Up 3</li>
                                    <li>Slide Up 4</li>
                                </ul>
                            </div>

<br />
                            <div class="sp--tabs sp--css-notready"
                                tabs="lg-dark"
                                contents="3xl-dark"
                                data-tabevent="click"
                                data-initialtab="4"
                                data-effect="to_slidedown"
                            >
                                <ul class="sp--tabs-controler">
                                    <li>탭 1</li>
                                    <li>탭 2</li>
                                    <li>탭 3</li>
                                    <li>탭 4</li>
                                </ul>
                                <ul class="sp--tabs-contents">
                                    <li>Slide Down 1</li>
                                    <li>Slide Down 2</li>
                                    <li>Slide Down 3</li>
                                    <li>Slide Down 4</li>
                                </ul>
                            </div>

Class

name	description
.sp--tabs	탭 컨테이너
.sp--css-notready	탭은 컨텐츠가 모두 펼쳐진 상태이기 때문에, 최초 숨겨진 상태로 시작하기 위한 selector 이다. 탭이 완성되고 난 후 삭제되니, 스타일에 활용하지 말라.
.sp--tabs-controler	탭 내부 컨트롤러 : 버튼 ( li는 배열로 활용된다. )
.sp--tabs-contents	탭 내부 컨텐츠 ( li는 배열로 활용된다. )

Attribute

name	description
data-tabevent	default : 'click' ( string ) eventlistener 모든 타입이 적용되지만, 'click', 'mouseenter' 두 타입만 사용하는게 좋다.
data-initialtab	default : 1 ( number ) 먼저 열어둘 index를 입력한다.
data-effect	아코디언과는 다르게, 탭은 여러 타입으로 애니메이션을 정의한다. 각 클래스는 css animation을 조회해야 한다. 애니메이션 코드와 연결해서 사용이 가능하다. css - animation document

Etc

탭을 자동 이동 시키려면, 그냥 슬라이더 라이브러리를 사용하자.