Function rippleFocus

  • rippleFocus(
        opts?: {
            background?: string;
            duration?: number;
            enabled?: boolean;
            selector?: string;
        },
    ): Action<HTMLElement, ActionReturn<RippleFocus>>

  • 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; enabled?: boolean; selector?: string }

      Optional parameters.

      • Optionalbackground?: string

        A valid CSS background attribute.

      • Optionalduration?: number

        Duration in milliseconds.

      • Optionalenabled?: boolean

        Enabled state.

      • Optionalselector?: string

        A valid CSS selector string.

    Returns Action<HTMLElement, ActionReturn<RippleFocus>>

    Actual rippleFocus Action.

Settings

Member Visibility