• welcome
  • faqs
  • principle
  • semantic
  • tokens
  • components
  • theming
  • typography
  • colors
  • badge
  • button
  • calendar
  • cards
  • checkbox
  • input
  • list
  • message
  • pagination
  • panel
  • segments
  • selectbox
  • switch
  • table
  • tabs
  • tag
  • form
  • grid
  • grid2
  • 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">Item 1</div>
    <div class="tab-item tab">Item 2</div>
    ...
    <div class="tab-item tab">Item n</div>
  </div>
</div>