• 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

    • Switch

    부드러운 전환 효과를 가진 on/off 토글 형태의 입력 컴포넌트.

    Base 1

    
<label class="ga-switch slide">
    <input type="checkbox" checked />
    <span class="switch" />
</label>

    Base 2

    
<label class="ga-switch slide inside">
    <input type="checkbox" checked />
    <span class="switch" />
</label>

    Round

    
<label class="ga-switch slide">
    <input type="checkbox" checked />
    <span class="switch round" />
</label>

    Button

    
<label class="ga-switch button">
    <input type="checkbox" checked />
    <span class="on active">ON</span>
    <span class="off">OFF</span>
</label>

    Colors

    
<label class="ga-switch { @colors }">
    <input type="checkbox" checked />
    <span class="switch" />
</label>