Overviews
  • welcome
  • FAQs
  • components
    • Bases
  • typography
  • colors
    • Elements
  • button
  • input
  • tag
  • checkbox
  • switch
  • badge
  • list
  • selectbox
  • message
  • tabs
  • cards
  • segments
  • table
  • pagination
  • panel
  • calendar
    • Layouts
  • form
  • grid
  • grid2
    • Modules
  • modal
  • toast

    • Tabs

    탭 형태로 여러 콘텐츠 섹션을 전환하는 UI.

    Base

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
      <div class="ga-tabs">
      <div class="tab-menu">
          <div class="tab-item tab active">Item 1</div>
          <div class="tab-item tab">Item 2</div>
            ...
          <div class="tab-item tab">Item n</div>
      </div>
  </div>

    Vertical

    Item 1
    Item 2
    Item 3
      <div class="ga-tabs vertical">
      <div class="tab-menu">
          <div class="tab-item tab active">Item 1</div>
          <div class="tab-item tab">Item 2</div>
            ...
          <div class="tab-item tab">Item n</div>
      </div>
  </div>

    Active (Line)

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 1
    Item 2
    Item 3
      <div class="ga-tabs line">
      <div class="tab-menu">
          <div class="tab-item tab active">Item 1</div>
          <div class="tab-item tab">Item 2</div>
            ...
          <div class="tab-item tab">Item n</div>
      </div>
  </div>

    Active (Button)

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    tab contents
      <div class="ga-tabs button">
      <div class="tab-menu">
          <div class="tab-item tab active">Item 1</div>
          <div class="tab-item tab">Item 2</div>
            ...
          <div class="tab-item tab">Item n</div>
      </div>
  </div>

    Browser Tab

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    ADD
      <div class="ga-tabs browser">
      <div class="tab-menu">
          <div class="tab-item tab active">
             <span class="tabText ellipsis">Item 1</span>
             <span class="btn-close"><i class="xi-colse" /></span>
          </div>
          <div class="tab-item tab">
            <span class="tabText ellipsis">Item 2</span>
            <span class="btn-close"><i class="xi-colse" /></span>
          </div>
            ...
          <div class="tab-item tab">
            <span class="tabText ellipsis">Item N</span>
            <span class="btn-close"><i class="xi-colse" /></span>
          </div>
      </div>
  </div>