RIPPLE

HOMEWORKS 버튼 Wave 이펙트 플러그인

Summary

RIPPLE은 사용자 경험을 높여주기위한 이펙트 컴포넌트입니다.

사용자가 버튼을 클릭하면, 버튼을 클릭한 지점으로부터 웨이브와 같은 이펙트가 발생합니다.

Usage

• HTML

  <a href="#" class="btn btn-primary">Ripple Button</a>
  

• JAVASCRIPT

  // General usage.
  $('.btn').ripple();
  

  // Dark theme ripple.
  $('.btn').ripple({
    theme: 'dark'
  });
  

  // Ripple passive mode which can be size over than parent.
  $('.btn').ripple({
    passive: true,
    over: true
  });
  

• VIEW HOOK

  <!--
  ================================================================
  VIEW HOOK은 HOMEWORKS에서 제공하는 HTML 속성 확장을 이용하기 때문에,
  JAVASCRIPT를 생략할 수 있습니다.
  ================================================================
  -->
  <a href="#" class="btn btn-primary" data-ripple="true">Ripple Button</a>
  

Functions

Ripple

• Type: Function
• Description: Ripple을 초기화하는 함수.

• Arguments:

  • element: Element
  • options: Object (optional)

• Options:

  • theme: string

    • RIPPLE WAVE의 색상을 정의합니다. (light - Default, dark - Dark)

  • over: boolean

    • RIPPLE WAVE가 부모의 영역을 넘어서도 되는지 여부, (false - Default)

  • passive: boolean

    • RIPPLE 버튼을 수동모드로 전환, 클릭 시 RIPPLE WAVE가 발생하지 않지만,
    • Ripple.method.start로 강제 RIPPLE WAVE 호출 가능.

Ripple.method.start

• Type: Method
• Description: RIPPLE WAVE를 강제적으로 발생시키는 함수

• Arguments:

  • element: Element

  • value: Object

    • x: number
    • y: number

• Example:

    // RIPPLE WAVE를 강제적으로 발생시킵니다.
    // 해당 예제에선 X - 12, Y: 5에 RIPPLE WAVE를 발생시킵니다.
    var $ripple = $('.btn').ripple({
        theme: 'dark',
        passive: true
    });
  
    $ripple.start({
        x: 12,
        y: 5
    });
  

View Hook

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

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

Attribute - ripple

• Value: RippleTheme [light, dark]
• Description: Ripple Wave 테마에 대한 지정, true로 지정하게 되면 Default 옵션인 light가 적용.

Example

• HTML

  <a href="#" class="btn btn-primary" 
    data-ripple="true"
  >
    Ripple Button
  </a>