Function rippleFocus

rippleFocus(opts?): Action
Defines the classic Material Design ripple effect as an action that is attached to an elements focus and blur events. rippleFocus 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.

If providing the selector option a target child element will be registered for the focus events otherwise the first child is targeted with a final fallback of the element assigned to this action.

Styling: There is a single CSS variable --tjs-action-ripple-background-focus that can be set to control the background with a fallback to --tjs-action-ripple-background.
Parameters
- Optionalopts: {
      background?: string;
      duration?: number;
      selector?: string;
  }
  Optional parameters.
  - Optionalbackground?: string
    A valid CSS background attribute.
  - Optionalduration?: number
    Duration in milliseconds.
  - Optionalselector?: string
    A valid CSS selector string.
Returns Action
Actual action.