-
Notifications
You must be signed in to change notification settings - Fork 439
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🚀 - Global Ripple
#5778
Comments
I have two ideas: 1. Provide tuiGlobalRipple directive that will applied for tui-root, listen mutations, and apply ripple for given selector. Example:<tui-root tuiGlobalRipple="button,a,.ripple" > ... This solution allow to apply ripple for any elements (including custom projects elements). But we should develop this directive carefully, for avoid performance regression with large DOM trees. 2. Provide config that contain booleans for enable / disable ripple for certain TUI elements. Example:@NgModule({
...
providers: [
...
tuiUseRipple({
button: true,
link: false,
default: false,
}),
],
})
export class AppModule {
} I think this solution more reliable, because of we do not need to listen DOM mutations and care about performance issues. But it require apply directive for each component we want to add ripple. type TuiRippleKey = 'button' | 'link' /* ... */;
export interface TuiRippleConfig {
default: boolean;
[K: TuiRippleKey | string]: boolean
}
export declare function tuiApplyRipple(key: TuiRippleKey | string, element: ElementRef<HTMLElement> /* ... */): void;
// Example typing
const config: TuiRippleConfig = {
default: true,
button: false,
link: true,
test: false,
}; Developers can apply ripple to theirs components: export class TestComponent {
constructor(
elementRef: ElementRef<HTMLElement>,
/* ... */
) {
tuiApplyRipple('test', elementRef);
}
} |
We already have a directive that does the ripple effect. It relies on It listens to events on the I believe we should allow passing the CSS selector rather than a config. It would just listen to all bubbled events inside our directive and when we believe it is time to initiate ripple we can just check for |
Description
We need a way to enable ripple globally. Probably through CSS selector list or something similar.
The text was updated successfully, but these errors were encountered: