@equinor/fusion-wc-ripple

fusion-wc-ripple

Storybook

Installation

npm install @equinor/fusion-wc-ripple

Ripple <fwc-ripple>

Properties/Attributes

Name	Type	Default	Description
primary	boolean	false	When true, sets the ripple color to --mdc-theme-primary. Will be overridden by --mdc-ripple-color if set.
accent	boolean	false	When true, sets the ripple color to --mdc-theme-secondary. Will be overridden by --mdc-ripple-color if set.
unbounded	boolean	false	When true, the ripple will flow outside the component in a circle.
activated	boolean	false	Set true when the container of the ripple should be in an activated state.
selected	boolean	false	Set true when the container of the ripple should be in a selected state.
disabled	boolean	false	Set true to disable the ripple when the container of the ripple is disabled.

Methods

Name	Description
startPress(event?: Event) => void	Begin the press state of the ripple. Optional Event will be used to determine the beginning coordinates of the ripple animation when unbounded is false.
endPress() => void	End the press state of the ripple.
startFocus() => void	Begin the focus state of the ripple.
endFocus() => void	End the focus state of the ripple.
startHover() => void	Begin the hover state of the ripple.
endHover() => void	End the hover state of the ripple.