Angular pseudo-class
Take control on CSS pseudo-classes !
Provides a set of jQuery, Angular and Sass features to easily control the CSS pseudo-classes in Javascript.
Install
npm install --save angular-pseudo-class
Import in Angular
; let app = angular;
If you use Sass, import the mixins (path to node_modules
can be different).
Usage
Supported pseudo-classes
🚧 The module is still in development. The following pseudo-classes are supported:
active
hover
- ... work in progress ...
Listen for pseudo-classes
👉 Feature from jquery-pseudo-class
$elem; $elem;
For exemple:
var $elem = ; $elem;
Pseudo-class control
⚠️ The pseudo-classes controlled by Js are slower than the standard CSS pseudo-classes. Use it only if you need it.
Make a component pseudo-classes controlled by the JS events. So it can be stopped, prevent or manually triggered. If no pseudo-classes are given, all supported pseudo-classes are controlled.
<!-- OR ... pseudo-class-ctrl = "active hover" ... --><!-- OR ... pseudo-class-ctrl ... --> My :hover is controlled !
In the CSS, the pseudo-class is triggered by:
With Sass:
}}
Pseudo-class scope
In CSS, when you click on a child component, you clicked too on the parent. It can be undesired in some situations.
Make the child like out of his parent with pseudo-class-scope
.
If no pseudo-classes are given, all supported pseudo-classes are prevent.
I'm free ! <!-- OR ... pseudo-class-scope = "active hover" ... --> <!-- OR ... pseudo-class-scope ... -->
For exemple, to color the background in grey or the link in red when you click on them.
With Sass:
}} }}
Licence
This module is under the Apache 2.0 Licence. Please refer to the LICENCE file for more details.
Made with ❤️ in Paris