TOGGLE

HOMEWORKS Form 토글 컴포넌트.

Summary

TOGGLE은 사용자 경험을 한층 상승시켜 주기 위한 Radio 컴포넌트 입니다.

HTML 태그 중 input:radio 태그를 대체할 수 있는 컴포넌트입니다.

STYLE > INPUT과 연관되어 사용 할 수 있습니다.

Usage

• HTML

  <input type="radio" class="input input-primary" />
  

• JAVASCRIPT

  var placeholder = ['Inactive', 'Active']; // Toggle placeholder message for UI.
  $('.input').toggle({
    placeholder: placeholder
  });
  

• VIEW HOOK

  <!--
  ================================================================
  VIEW HOOK은 HOMEWORKS에서 제공하는 HTML 속성 확장을 이용하기 때문에,
  JAVASCRIPT를 생략할 수 있습니다.
  ================================================================
  -->
  <input type="radio" class="input input-primary" data-toggle="true" data-togglePlaceholder="['Inactive', 'Active']" />
  

Functions

Toggle

• Type: Function
• Description: Checkbox를 초기화하는 함수.

• Arguments:

  • element: Element
  • options: Object (optional)

• Options:

  • None

View Hook

TOGGLE 컴포넌트는 View Hook을 제공합니다.

View Hook이 걸려있는 라디오 버튼에 TOGGLE을 자동적으로 바인딩합니다.

Attribute - toggle

• Value: <any>
• Description: null, undefined외 값을 지정 권장.

Attribute - togglePlaceholder

• Value: Array<string>
• Description: [InactiveString, ActiveString] 형식으로 지정.

Example

• HTML

  <input type="radio" class="input input-primary" 
    data-toggle="true"
    data-togglePlaceholder="['Inactive', 'Active']"
  />