project components guide

기본 가이드

설계 단계의 특별한 UX 요청이나 개발 환경에 따른 제약으로 개발 요청 사항이 없다면 테스트 완료된 코드를 복사 붙여 넣기를 기본으로 합니다.
각각의 탭과 컨텐츠별로 data-tab-value를 를 부여합니다
디폴트로 활성화 할 탭이있다면 data-active 를 사용합니다. 기본값은 첫번째탭입니다.

협의 할 점

가이드를 작성 합니다.

접근성 가이드

가이드를 작성 합니다.

Tab

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content


<!-- Tab : default -->
<div class="component-tab" data-component="tab" data-active="tab2">
  <div class="tab-head">
    <button type="button" class="tab-label" data-tab-value="tab1">TAB 1</button>
    <button type="button" class="tab-label" data-tab-value="tab2">TAB 2</button>
    <button type="button" class="tab-label" data-tab-value="tab3">TAB 3</button>
  </div>
  <div class="tab-body">
    <div class="tab-content" data-tab-value="tab1">
      <div class="content-inner"> Tab content 1 </div>
    </div>
    <div class="tab-content" data-tab-value="tab2">
      <div class="content-inner"> Tab content 2 </div>
    </div>
    <div class="tab-content" data-tab-value="tab3">
      <div class="content-inner"> Tab content 3 </div>
    </div>
  </div>
</div>
<!-- // Tab : default -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Tab in Tab

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content


<!-- Tab in Tab -->
<div class="component-tab" data-component="tab" data-active="tab1">
  <div class="tab-head">
    <button type="button" class="tab-label" data-tab-value="tab1">Tab1</button>
    <button type="button" class="tab-label" data-tab-value="tab2">Tab2</button>
    <button type="button" class="tab-label" data-tab-value="tab3">Tab3</button>
  </div>
  <div class="tab-body">
    <div class="component-tab tab-content" data-component="tab" data-tab-value="tab1" data-active="tab1-1">
      <div class="tab-head">
        <button type="button" class="tab-label" data-tab-value="tab1-1">Tab1-1</button>
        <button type="button" class="tab-label" data-tab-value="tab1-2">Tab1-2</button>
        <button type="button" class="tab-label" data-tab-value="tab1-3">Tab1-3</button>
      </div>
      <div class="tab-body">
        <div class="tab-content" data-tab-value="tab1-1">
          <div class="content-inner"> Tab content 1 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab1-2">
          <div class="content-inner"> Tab content 1 - 2</div>
        </div>
        <div class="tab-content" data-tab-value="tab1-3">
          <div class="content-inner"> Tab content 1 - 3</div>
        </div>
      </div>
    </div>
    <div class="component-tab tab-content" data-component="tab" data-tab-value="tab2">
      <div class="tab-head">
        <button type="button" class="tab-label" data-tab-value="tab2-1">Tab2-1</button>
        <button type="button" class="tab-label" data-tab-value="tab2-2">Tab2-2</button>
        <button type="button" class="tab-label" data-tab-value="tab2-3">Tab2-3</button>
      </div>
      <div class="tab-body">
        <div class="tab-content" data-tab-value="tab2-1">
          <div class="content-inner"> Tab content 2 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab2-2">
          <div class="content-inner"> Tab content 2 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab2-3">
          <div class="content-inner"> Tab content 2 - 1</div>
        </div>
      </div>
    </div>
    <div class="component-tab tab-content" data-component="tab" data-tab-value="tab3">
      <div class="tab-head">
        <button type="button" class="tab-label" data-tab-value="tab3-1">Tab3-1</button>
        <button type="button" class="tab-label" data-tab-value="tab3-2">Tab3-2</button>
        <button type="button" class="tab-label" data-tab-value="tab3-3">Tab3-3</button>
      </div>
      <div class="tab-body">
        <div class="tab-content" data-tab-value="tab3-1">
          <div class="content-inner"> Tab content 3 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab3-2">
          <div class="content-inner"> Tab content 3 - 2</div>
        </div>
        <div class="tab-content" data-tab-value="tab3-3">
          <div class="content-inner"> Tab content 3 - 3</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- // Tab in Tab -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Tab Head Sticky

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content
Tab Head Sticky : data-props-sticky="true"


<!-- Tab Head Sticky -->
  <div class="component-tab" data-component="tab" data-props-sticky="true">
    <div class="tab-head">
      <button type="button" class="tab-label" data-tab-value="tab1">TAB 1</button>
      <button type="button" class="tab-label" data-tab-value="tab2">TAB 2</button>
      <button type="button" class="tab-label" data-tab-value="tab3">TAB 3</button>
    </div>
    <div class="tab-body">
      <div class="tab-content" data-tab-value="tab1">
        <div class="content-inner" style="height: 400px;"> Tab content 1</div>
      </div>
      <div class="tab-content" data-tab-value="tab2">
        <div class="content-inner" style="height: 400px;"> Tab content 2</div>
      </div>
      <div class="tab-content" data-tab-value="tab3">
        <div class="content-inner" style="height: 400px;"> Tab content 3</div>
      </div>
    </div>
  </div>
  <!-- // Tab Head Sticky -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Tab Head Sticky : 위치 조절

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content
Tab Head Sticky : data-props-sticky="class" - class의 높이에 따라 Tab 위치를 조절할수있다.


<!-- Tab Head Sticky -->
<p class="height-controll" style="position: sticky; top: 0; height: 50px;background-color: aliceblue; font-size: 20px; line-height: 50px; text-align: center; ">타이틀 or GNB</p>
  <div class="component-tab" data-component="tab" data-props-sticky=".height-controll">
    <div class="tab-head">
      <button type="button" class="tab-label" data-tab-value="tab11">TAB 1</button>
      <button type="button" class="tab-label" data-tab-value="tab12">TAB 2</button>
      <button type="button" class="tab-label" data-tab-value="tab13">TAB 3</button>
    </div>
    <div class="tab-body">
      <div class="tab-content" data-tab-value="tab11">
        <div class="content-inner" style="height: 250px;"> Tab content 1</div>
      </div>
      <div class="tab-content" data-tab-value="tab12">
        <div class="content-inner" style="height: 250px;"> Tab content 2</div>
      </div>
      <div class="tab-content" data-tab-value="tab13">
        <div class="content-inner" style="height: 250px;"> Tab content 3</div>
      </div>
    </div>
  </div>
  <!-- // Tab Head Sticky -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Tab Scroll

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content
Tab Head Scroll : .tab-scroll
활성화 탭 좌측으로 이동


<!-- Tab Scroll -->
<div class="component-tab tab-scroll" data-component="tab">
  <div class="tab-head">
    <button type="button" class="tab-label" data-tab-value="tab1">TAB 1</button>
    <button type="button" class="tab-label" data-tab-value="tab3">TAB 2</button>
    <button type="button" class="tab-label" data-tab-value="tab2">TAB 3</button>
    <button type="button" class="tab-label" data-tab-value="tab4">TAB 4</button>
    <button type="button" class="tab-label" data-tab-value="tab5">TAB 5</button>
  </div>
  <div class="tab-body">
    <div class="tab-content" data-tab-value="tab1">
      <div class="content-inner"> Tab content 1</div>
    </div>
    <div class="tab-content" data-tab-value="tab2">
      <div class="content-inner"> Tab content 2</div>
    </div>
    <div class="tab-content" data-tab-value="tab3">
      <div class="content-inner"> Tab content 3</div>
    </div>
    <div class="tab-content" data-tab-value="tab4">
      <div class="content-inner"> Tab content 4</div>
    </div>
    <div class="tab-content" data-tab-value="tab5">
      <div class="content-inner"> Tab content 5</div>
    </div>
  </div>
</div>
<!-- // Tab Scroll -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Tab Head Sticky + Scroll

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content
Tab Head Sticky : data-props-sticky="true"
Tab Head Scroll : .tab-scroll
활성화 탭 좌측으로 이동


<!-- Tab Head Sticky + Scroll -->
<div class="component-tab tab-scroll" data-component="tab" data-props-sticky="true">
  <div class="tab-head">
    <button type="button" class="tab-label" data-tab-value="tab6">TAB 1</button>
    <button type="button" class="tab-label" data-tab-value="tab7">TAB 2</button>
    <button type="button" class="tab-label" data-tab-value="tab8">TAB 3</button>
    <button type="button" class="tab-label" data-tab-value="tab9">TAB 4</button>
    <button type="button" class="tab-label" data-tab-value="tab10">TAB 5</button>
  </div>
  <div class="tab-body">
    <div class="tab-content" data-tab-value="tab6">
      <div class="content-inner" style="height: 400px;"> Tab content 1</div>
    </div>
    <div class="tab-content" data-tab-value="tab7">
      <div class="content-inner" style="height: 400px;"> Tab content 2</div>
    </div>
    <div class="tab-content" data-tab-value="tab8">
      <div class="content-inner" style="height: 400px;"> Tab content 3</div>
    </div>
    <div class="tab-content" data-tab-value="tab9">
      <div class="content-inner" style="height: 400px;"> Tab content 4</div>
    </div>
    <div class="tab-content" data-tab-value="ttab10ab5">
      <div class="content-inner" style="height: 400px;"> Tab content 5</div>
    </div>
  </div>
</div>
<!-- // Tab Head Sticky + Scroll -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */

Tab in Tab + Sub Tab Sticky

컴포넌트 클래스 : .component-tab
컴포넌트 자식 클래스 : .tab-head, .tab-body, .tab-label, .tab-content
Tab Head Sticky : data-props-sticky="true"


<!-- Tab in Tab + Sub Tab Sticky -->
<div class="component-tab" data-component="tab" data-active="tab1">
  <div class="tab-head">
    <button type="button" class="tab-label" data-tab-value="tab1">Tab1</button>
    <button type="button" class="tab-label" data-tab-value="tab2">Tab2</button>
    <button type="button" class="tab-label" data-tab-value="tab3">Tab3</button>
  </div>
  <div class="tab-body">
    <div class="component-tab tab-content" data-component="tab" data-tab-value="tab1" data-active="tab1-1" data-props-sticky="true">
      <div class="tab-head">
        <button type="button" class="tab-label" data-tab-value="tab1-1">Tab1-1</button>
        <button type="button" class="tab-label" data-tab-value="tab1-2">Tab1-2</button>
        <button type="button" class="tab-label" data-tab-value="tab1-3">Tab1-3</button>
      </div>
      <div class="tab-body">
        <div class="tab-content" data-tab-value="tab1-1">
          <div class="content-inner" style="height: 400px;"> Tab content 1 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab1-2">
          <div class="content-inner" style="height: 400px;"> Tab content 1 - 2</div>
        </div>
        <div class="tab-content" data-tab-value="tab1-3">
          <div class="content-inner" style="height: 400px;"> Tab content 1 - 3</div>
        </div>
      </div>
    </div>
    <div class="component-tab tab-content" data-component="tab" data-tab-value="tab2" data-props-sticky="true">
      <div class="tab-head">
        <button type="button" class="tab-label" data-tab-value="tab2-1">Tab2-1</button>
        <button type="button" class="tab-label" data-tab-value="tab2-2">Tab2-2</button>
        <button type="button" class="tab-label" data-tab-value="tab2-3">Tab2-3</button>
      </div>
      <div class="tab-body">
        <div class="tab-content" data-tab-value="tab2-1">
          <div class="content-inner" style="height: 400px;"> Tab content 2 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab2-2">
          <div class="content-inner" style="height: 400px;"> Tab content 2 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab2-3">
          <div class="content-inner" style="height: 400px;"> Tab content 2 - 1</div>
        </div>
      </div>
    </div>
    <div class="component-tab tab-content" data-component="tab" data-tab-value="tab3" data-props-sticky="true">
      <div class="tab-head">
        <button type="button" class="tab-label" data-tab-value="tab3-1">Tab3-1</button>
        <button type="button" class="tab-label" data-tab-value="tab3-2">Tab3-2</button>
        <button type="button" class="tab-label" data-tab-value="tab3-3">Tab3-3</button>
      </div>
      <div class="tab-body">
        <div class="tab-content" data-tab-value="tab3-1">
          <div class="content-inner" style="height: 400px;"> Tab content 3 - 1</div>
        </div>
        <div class="tab-content" data-tab-value="tab3-2">
          <div class="content-inner" style="height: 400px;"> Tab content 3 - 2</div>
        </div>
        <div class="tab-content" data-tab-value="tab3-3">
          <div class="content-inner" style="height: 400px;"> Tab content 3 - 3</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- // Tab in Tab + Sub Tab Sticky -->

/* css 주석 사용시 이 주석사용 부탁드립니다. */