Tab

기본 사용

<div class="gn-tab">
  <ul>
    <li class="is-active"><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>

크기

<div class="gn-tab is-small">
  <ul>
    <li class="is-active"><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-normal">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li class="is-active"><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-medium">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li class="is-active"><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-large">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li class="is-active"><a href="#gnui">GNUI</a></li>
  </ul>
</div>

스타일

<div class="gn-tab is-border-half">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li class="is-active"><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-border">
  <ul>
    <li><a href="#genians">Genians</a></li>
    <li class="is-active"><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>

정렬

<div class="gn-tab is-full">
  <ul>
    <li class="is-active"><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-center">
  <ul>
    <li class="is-active"><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-right">
  <ul>
    <li class="is-active"><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>
<div class="gn-tab is-vertical is-medium">
  <ul>
    <li class="is-active"><a href="#genians">Genians</a></li>
    <li><a href="#rndcenter">R&amp;D Center</a></li>
    <li><a href="#fd">Front-end</a></li>
    <li><a href="#gnui">GNUI</a></li>
  </ul>
</div>

생성 옵션

  <div id="newTab">
    <ul>
      <li><a href="#genians"><span class="gn-icon is-small"><i class="fas fa-home"></i></span> Genians</a></li>
      <li class="is-active"><a href="#rndcenter">R&amp;D Center</a></li>
      <li><a href="#fd">Front-end</a></li>
      <li><a href="#gnui">GNUI</a></li>
    </ul>
  </div>
  <div id="newContents">
    <div id="genians">Genians</div>
    <div id="rndcenter">R&amp;D Center</div>
    <div id="fd">Front-end</div>
    <div id="gnui">GNUI</div>
  </div>

  Gn.create('tab', {
    target: '#newTab',
    align: 'center',
    contents: '#newContents',
    onChange: function(idx){
      console.log(idx + '번 탭이 활성화 되었습니다.')
    }
  });

name		type	default	description
target		string		탭을 생성할 대상의 선택자(selector)
tabIndex		number	0	초기 활성화 탭 인덱스
contents		string		탭 컨텐츠로 사용될 element selector
size		string		'small','normal','medium','large'
align		string	full	'full', 'left','right', 'vertical'
style		string		'border','border-half'
onChange(idx)		function		탭 전환 시 발생 이벤트 (idx: 활성화 탭 인덱스)
disabled		boolean	false	비활성화 여부

메소드

name	return	description
change(index: number)	void	index에 해당하는 탭을 활성화한다.
disable()	void	Disabled 처리한다.
enable()	void	Enabled 처리한다.