Switch

기본 사용

• 사용 태그 : label > input[checkbox] + .switch-toggle

  <label class="gn-switch">
    <input type="checkbox" /><span class="switch-toggle">Toggle</span>
  </label>

크기

  <label class="gn-switch is-small">
    <input type="checkbox" /><span class="switch-toggle">Toggle</span>
    Small
  </label>
  <label class="gn-switch is-normal">
    <input type="checkbox" /><span class="switch-toggle">Toggle</span>
    Normal
  </label>
  <label class="gn-switch is-medium">
    <input type="checkbox" /><span class="switch-toggle">Toggle</span>
    Medium
  </label>
  <label class="gn-switch is-large">
    <input type="checkbox" /><span class="switch-toggle">Toggle</span>
    Large
  </label>

색상

  <label class="gn-switch is-success">
    <input type="checkbox" checked /><span class="switch-toggle">Toggle</span>
    Success
  </label>
  <label class="gn-switch is-warning">
    <input type="checkbox" checked /><span class="switch-toggle">Toggle</span>
    Warning
  </label>
  <label class="gn-switch is-danger">
    <input type="checkbox" checked /><span class="switch-toggle">Toggle</span>
    Danger
  </label>
  <label class="gn-switch is-info">
    <input type="checkbox" checked /><span class="switch-toggle">Toggle</span>
    Info
  </label>

상태

  <label class="gn-switch">
    <input type="checkbox" disabled /><span class="switch-toggle">Toggle</span>
  </label>
  <label class="gn-switch">
    <input type="checkbox" checked disabled /><span class="switch-toggle">Toggle</span>
  </label>
  <label class="gn-switch is-invalid">
    <input type="checkbox" /><span class="switch-toggle">Invalid</span>
  </label>

생성 옵션

<input type="checkbox" class="new-switch" />

  Gn.create('switch', {
    target:  '.new-switch',
    size: 'large',
    color: 'info',
    checked: true,
    onToggle: function (e) { console.log('toggle 이벤트'); }
  });

name		type	default	description
target		string		스위치를 생성할 대상의 선택자(selector)
textSets	toggleText	string		토글에 표기할 문구
checked		boolean	false	스위치 초기 체크상태
disabled		boolean	false	스위치 비활성화 여부
color		string		'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'
size		string		'small','normal','medium','large'
onToggle		function		토글 시 수행될 이벤트

메소드

name	return	description
toggle()	void	스위치 상태를 토글한다.
getValue()	boolean	스위치 상태를 반환한다.
disable()	void	Disabled 처리한다.
enable()	void	Enabled 처리한다.