@material/ripple

@material/ripple

Version 14.0.0
Published 2 years ago
403 kB
7 dependencies
MIT license

Install

npm i @material/ripple

yarn add @material/ripple

pnpm add @material/ripple

Overview

The Material Components for the web Ink Ripple effect for web element interactions

Index

Variables

variable cssClasses

const cssClasses: {
    BG_FOCUSED: string;
    FG_ACTIVATION: string;
    FG_DEACTIVATION: string;
    ROOT: string;
    UNBOUNDED: string;
};

Copyright 2016 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable numbers

const numbers: {
    DEACTIVATION_TIMEOUT_MS: number;
    FG_DEACTIVATION_MS: number;
    INITIAL_ORIGIN_SCALE: number;
    PADDING: number;
    TAP_DELAY_MS: number;
};

variable strings

const strings: {
    VAR_FG_SCALE: string;
    VAR_FG_SIZE: string;
    VAR_FG_TRANSLATE_END: string;
    VAR_FG_TRANSLATE_START: string;
    VAR_LEFT: string;
    VAR_TOP: string;
};

Classes

class MDCRipple

class MDCRipple
    extends MDCComponent<MDCRippleFoundation>
    implements MDCRippleCapableSurface {}

property disabled

disabled: boolean;

property unbounded

unbounded: boolean;

method activate

activate: () => void;

method attachTo

static attachTo: (root: Element, opts?: MDCRippleAttachOpts) => MDCRipple;

method createAdapter

static createAdapter: (instance: MDCRippleCapableSurface) => MDCRippleAdapter;

method deactivate

deactivate: () => void;

method getDefaultFoundation

getDefaultFoundation: () => MDCRippleFoundation;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method layout

layout: () => void;

class MDCRippleFoundation

class MDCRippleFoundation extends MDCFoundation<MDCRippleAdapter> {}

constructor

constructor(adapter?: Partial<MDCRippleAdapter>);

property cssClasses

static readonly cssClasses: {
    BG_FOCUSED: string;
    FG_ACTIVATION: string;
    FG_DEACTIVATION: string;
    ROOT: string;
    UNBOUNDED: string;
};

property defaultAdapter

static readonly defaultAdapter: MDCRippleAdapter;

property numbers

static readonly numbers: {
    DEACTIVATION_TIMEOUT_MS: number;
    FG_DEACTIVATION_MS: number;
    INITIAL_ORIGIN_SCALE: number;
    PADDING: number;
    TAP_DELAY_MS: number;
};

property strings

static readonly strings: {
    VAR_FG_SCALE: string;
    VAR_FG_SIZE: string;
    VAR_FG_TRANSLATE_END: string;
    VAR_FG_TRANSLATE_START: string;
    VAR_LEFT: string;
    VAR_TOP: string;
};

method activate

activate: (evt?: Event) => void;

Parameter evt
Optional event containing position information.

method deactivate

deactivate: () => void;

method destroy

destroy: () => void;

method handleBlur

handleBlur: () => void;

method handleFocus

handleFocus: () => void;

method init

init: () => void;

method layout

layout: () => void;

method setUnbounded

setUnbounded: (unbounded: boolean) => void;

Interfaces

interface MDCRippleAdapter

interface MDCRippleAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method addClass

addClass: (className: string) => void;

method browserSupportsCssVars

browserSupportsCssVars: () => boolean;

method computeBoundingRect

computeBoundingRect: () => DOMRect;

method containsEventTarget

containsEventTarget: (target: EventTarget | null) => boolean;

method deregisterDocumentInteractionHandler

deregisterDocumentInteractionHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

method deregisterInteractionHandler

deregisterInteractionHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

method deregisterResizeHandler

deregisterResizeHandler: (handler: SpecificEventListener<'resize'>) => void;

method getWindowPageOffset

getWindowPageOffset: () => MDCRipplePoint;

method isSurfaceActive

isSurfaceActive: () => boolean;

method isSurfaceDisabled

isSurfaceDisabled: () => boolean;

method isUnbounded

isUnbounded: () => boolean;

method registerDocumentInteractionHandler

registerDocumentInteractionHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

method registerInteractionHandler

registerInteractionHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

method registerResizeHandler

registerResizeHandler: (handler: SpecificEventListener<'resize'>) => void;

method removeClass

removeClass: (className: string) => void;

method updateCssVariable

updateCssVariable: (varName: string, value: string | null) => void;

interface MDCRippleAttachOpts

interface MDCRippleAttachOpts {}

Options passed in when attaching a ripple to an object.

property isUnbounded

isUnbounded?: boolean;

interface MDCRippleCapableSurface

interface MDCRippleCapableSurface {}

See Material Design spec for more details on when to use ripples. https://material.io/guidelines/motion/choreography.html#choreography-creation unbounded Whether or not the ripple bleeds out of the bounds of the element. disabled Whether or not the ripple is attached to a disabled component.

property disabled

disabled?: boolean;

property root

root: Element;

property unbounded

unbounded?: boolean;

interface MDCRipplePoint

interface MDCRipplePoint {}

Copyright 2019 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

property x

x: number;

property y

y: number;

Type Aliases

type MDCRippleFactory

type MDCRippleFactory = (el: Element, foundation?: MDCRippleFoundation) => MDCRipple;

Namespaces

namespace util

module 'util.d.ts' {}

Copyright 2016 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

function getNormalizedEventCoords

getNormalizedEventCoords: (
    evt: Event | undefined,
    pageOffset: MDCRipplePoint,
    clientRect: DOMRect
) => MDCRipplePoint;

function supportsCssVariables

supportsCssVariables: (
    windowObj: typeof globalThis,
    forceRefresh?: boolean
) => boolean;

Package Files (7)

Dependencies (7)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/ripple.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/ripple)

HTML

<a href="https://www.jsdocs.io/package/@material/ripple"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 years ago.
Package analyzed in 3208 ms.
Missing or incorrect documentation? Open an issue for this package.

@material/ripple

Install

Overview

Index

Variables

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable cssClasses

variable numbers

variable strings

Classes

class MDCRipple

property disabled

property unbounded

method activate

method attachTo

method createAdapter

method deactivate

method getDefaultFoundation

method initialSyncWithDOM

method layout

class MDCRippleFoundation

constructor

property cssClasses

property defaultAdapter

property numbers

property strings

method activate

Parameter evt

method deactivate

method destroy

method handleBlur

method handleFocus

method init

method layout

method setUnbounded

Interfaces

interface MDCRippleAdapter

method addClass

method browserSupportsCssVars

method computeBoundingRect

method containsEventTarget

method deregisterDocumentInteractionHandler

method deregisterInteractionHandler

method deregisterResizeHandler

method getWindowPageOffset

method isSurfaceActive

method isSurfaceDisabled

method isUnbounded

method registerDocumentInteractionHandler

method registerInteractionHandler

method registerResizeHandler

method removeClass

method updateCssVariable

interface MDCRippleAttachOpts

property isUnbounded

interface MDCRippleCapableSurface

property disabled

property root

property unbounded

interface MDCRipplePoint

property x

property y

Type Aliases

type MDCRippleFactory

Namespaces

namespace util

function getNormalizedEventCoords

function supportsCssVariables

Package Files (7)

Dependencies (7)

Dev Dependencies (0)

Peer Dependencies (0)

Badge