Node Package Maid

    @limetech/mdc-p2-line-ripple
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.0 • Public • Published

    Line Ripple

    The line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.

    Design & API Documentation

    Installation

    npm install @limetech/mdc-p2-line-ripple
    

    Basic Usage

    HTML Structure

    <div class="mdc-line-ripple"></div>

    Styles

    @import "@limetech/mdc-p2-line-ripple/mdc-line-ripple";

    JavaScript Instantiation

    import {MDCLineRipple} from '@limetech/mdc-p2-line-ripple';
    
    const lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));

    Style Customization

    CSS Classes

    CSS Class Description
    mdc-line-ripple Mandatory.
    mdc-line-ripple--active Styles the line ripple as an active line ripple.
    mdc-line-ripple--deactivating Styles the line ripple as a deactivating line ripple.

    Sass Mixins

    Mixin Description
    mdc-line-ripple-color($color) Customizes the color of the line ripple when active.

    MDCLineRipple Properties and Methods

    Method Signature Description
    activate() => void Proxies to the foundation's activate() method.
    deactivate() => void Proxies to the foundation's deactivate() method.
    setRippleCenter(xCoordinate: number) => void Proxies to the foundation's setRippleCenter(xCoordinate: number) method.

    Usage Within Frameworks

    If you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

    MDCLineRippleAdapter

    Method Signature Description
    addClass(className: string) => void Adds a class to the root element.
    removeClass(className: string) => void Removes a class from the root element.
    hasClass(className: string) => boolean Determines whether the root element has the given CSS class name.
    setStyle(propertyName: string, value: string) => void Sets the style property with propertyName to value on the root element.
    registerEventHandler(evtType: EventType, handler: EventListener) => void Registers an event listener on the root element for a given event.
    deregisterEventHandler(evtType: EventType, handler: EventListener) => void Deregisters an event listener on the root element for a given event.

    MDCLineRippleFoundation

    Method Signature Description
    activate() => void Activates the line ripple.
    deactivate() => void Deactivates the line ripple.
    setRippleCenter(xCoordinate: number) => void Sets the center of the ripple to the xCoordinate given.
    handleTransitionEnd(evt: Event) => void Handles a transitionend event.

    Install

    npm i @limetech/mdc-p2-line-ripple

    DownloadsWeekly Downloads

    1

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    32.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • flippare
    • cybercap
    • specularrain
    • anderssonjohan