Function ripple

  • Defines the classic Material Design ripple effect as an action. ripple is a wrapper around the returned action. This allows it to be easily used as a prop.

    Note: A negative one translateZ transform is applied to the added spans allowing other content to be layered on top with a positive translateZ.

    Note: The ripple effect requires the efx element to have overflow hidden. This is set inline when the effect is applied.

    Note: A CustomEvent efx-trigger is handled in cases when explicit triggering is necessary. This event should have the actual source event as a property of detail.

    Styling: There is a single CSS variable --tjs-action-ripple-background that can be set to control the background.

    Parameters

    • Optionalopts: {
          background?: string;
          contextmenu?: boolean;
          debounce?: number;
          duration?: number;
          enabled?: boolean;
          events?: Iterable<string>;
          keyCode?: string;
      }

      Optional parameters.

      • Optionalbackground?: string

        A valid CSS background attribute.

      • Optionalcontextmenu?: boolean

        Add triggering for context menu key and click.

      • Optionaldebounce?: number

        Add a debounce to incoming events in milliseconds.

      • Optionalduration?: number

        Duration in milliseconds.

      • Optionalenabled?: boolean

        Enabled state.

      • Optionalevents?: Iterable<string>

        DOM event to bind element to respond with the ripple effect.

      • OptionalkeyCode?: string

        Key code to trigger for any applicable key events.

    Returns Action<HTMLElement, ActionReturn<Ripple, Record<never, any>>>

    Actual ripple Action.

Settings

Member Visibility