guide v11x

Class

Class	비고
.tabs-wrap	부모 영역 (옵션 보기)
.tabs-wrap	옵션 Class	`.tabs-vertical` `.line` `.type-A` `.type-B` `.type-D` `.type-E` `.type-F` `.type-G` `.type-H` `.type-I`
.tabs-header	제목 (옵션 보기)
.tabs-navs	메뉴 (옵션 보기)
	관련 Class	`.tabs-item` `.tabs-item.active`
	옵션 Class	`.expanded`
.tabs-panel	본문 (옵션 보기)

Layouts

<article class="tabs-wrap">
    <div class="tabs-header">기본 탭박스</div>
    <ul class="tabs-navs expanded">
        <li class="tabs-item active">
            <a href="#link">탭1</a>
        </li>
        <li class="tabs-item">
            <a href="#link">탭2</a>
        </li>
        <li class="tabs-item">
            <a href="#link">탭3</a>
        </li>
    </ul>
    <div class="tabs-panel">탭1 내용</div>
    <div class="tabs-panel">탭2 내용</div>
    <div class="tabs-panel">탭3 내용</div>
</article>

Skins

Type A

Type B

Type C

Type D

Type E

Type G

Type H

Type I

Type F

제어

Java Script

$(function() {
    $('.my-class').tabslet({
        mouseevent:   'hover',      // 마우스 이벤트: 'click' or 'hover'
        activeclass:  'active',     // 활성화 클래스
        attribute:    'href',       // 제어 속성
        animation:    false,        // 에니메이션: 'true' or 'false'
        autorotate:   false,        // 자동전환: 'true' or 'false'
        deeplinking:  false,        // 탭 활성화 기억: 'true' or 'false'
        pauseonhover: true,         // 마우스 접근시 자동전환 일시정지 'true' or 'false'
        delay:        2000,         // 자동전환 시간
        active:       1,            // 초기 활성화 탭
        container:    false,        // 'panel' 부모 여부
        controls:     { 
            prev: '.prev',          // 이전 버튼 클래스
            next: '.next'           // 다음 버튼 클래스
        }
    });
});

Custom Functions

`.tabs-wrap`

--nd-tabs-padding-x:                0;
--nd-tabs-padding-y:                0;
--nd-tabs-bg:                       transparent;
--nd-tabs-border:                   0;
--nd-tabs-border-radius:            0;

/* 지정위치사용 */
--nd-tabs-border-width:             1px;
--nd-tabs-border-style:             solid;
--nd-tabs-border-color:             #e8e8e9;

`.tabs-vertical`

--nd-tabs-navs-width:               200px;

/* 지정위치사용 */
--nd-tabs-border:                   var(--nd-tabs-border-width) var(--nd-tabs-border-style) var(--nd-tabs-border-color);
--nd-tabs-navs-margin-bottom:       0;

`.tabs-wrap.line` 지정위치사용

--nd-tabs-padding-x:                1rem;
--nd-tabs-padding-y:                var(--nd-tabs-padding-x);
--nd-tabs-bg:                       #fff;
--nd-tabs-border:                   var(--nd-tabs-border-width) var(--nd-tabs-border-style) var(--nd-tabs-border-color);

`.tabs-header`

--nd-tabs-header-margin-bottom:     1rem;
--nd-tabs-header-font-size:         1em;
--nd-tabs-header-font-weight:       700;
--nd-tabs-header-line-height:       1.2;

`.tabs-navs`

--nd-tabs-navs-margin-bottom:       1rem;

`.tabs-item`

/* active */
--nd-tabs-active-border-color:      var(--nd-tabs-border-color);

/* link (a tag) */
--nd-tabs-link-padding-x:           1rem;
--nd-tabs-link-padding-y:           0.5rem;
--nd-tabs-link-font-size:           0.875em;
--nd-tabs-link-font-weight:         400;
--nd-tabs-link-line-height:         1.5;
--nd-tabs-link-color:               #6c757d;
--nd-tabs-link-bg:                  #fff;

/* link hover (a tag) */
--nd-tabs-link-hover-color:         #000;
--nd-tabs-link-hover-bg:            #fff;

/* link active (a tag) */
--nd-tabs-link-active-font-weight:  700;
--nd-tabs-link-active-color:        var(--nd-primary, #007aff);
--nd-tabs-link-active-bg:           #fff;

`.tabs-panel`

--nd-tabs-panel-min-height:         unset;
--nd-tabs-panel-padding-x:          0;
--nd-tabs-panel-padding-y:          0;
--nd-tabs-panel-bg:                 transparent;

Class

Layouts

Skins

Type A

Type B

Type C

Type D

Type E

Type G

Type H

Type I

Type F

제어

Java Script

Custom Functions

.tabs-wrap

.tabs-vertical

.tabs-wrap.line 지정위치사용

.tabs-header

.tabs-navs

.tabs-item

.tabs-panel

`.tabs-wrap`

`.tabs-vertical`

`.tabs-wrap.line` 지정위치사용

`.tabs-header`

`.tabs-navs`

`.tabs-item`

`.tabs-panel`