Skip to main content
cngx-src documentation

CngxPressRipple

DirectivePrimaryv0.1.0

projects/common/interactive/ripple/press-ripple.directive.ts

Import#

import { CngxPressRipple } from '@cngx/common/interactive'

Description#

Molecule combining press feedback + ripple in a single directive.

Composes CngxPressable and CngxRipple as hostDirectives so the consumer gets both behaviors with one attribute. The cngx-pressed class and ripple wave both activate on pointer contact.

Button with press + ripple

<button cngxPressRipple>Click me</button>

With custom ripple color

<button cngxPressRipple [rippleColor]="'rgba(0,0,0,0.2)'">Click</button>

https://cngxjs.github.io/cngx/examples/#/common/interactive/ripple/press/buttons-with-press-ripple

Metadata#