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

``shell
npm install --save angular-pseudo-class
`

Import in Angular
`javascript
import pseudoClass from 'angular-pseudo-class';

let app = angular.module('myApp', [
pseudoClass
]);
`

If you use Sass, import the mixins (path to node_modules can be different).
`sass
@import "./node_modules/angular-pseudo-class/angular-pseudo-class";
`




Usage

$3

:construction: The module is still in development.
The following pseudo-classes are supported:
- active
- hover
- ... work in progress ...

$3


:point_right: Feature from jquery-pseudo-class
`javascript
$elem.onPseudoClass( pseudo_class, function_in, function_out );

$elem.onPseudoClass( {
pseudo_class: [function_in, function_out],
pseudo_class: [function_in, function_out],
...
} );
`

For exemple:
`javascript
var $elem = $('.js-button');

$elem.onPseudoClass('hover',
function(e) {
$elem.html('Mouse is in');
},
function(e) {
$elem.html('Mouse is out');
}
);
`

$3

:warning: 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.

`html



My :hover is controlled !

`

In the CSS, the pseudo-class is triggered by:
`css
.js-button.pseudo-class--hover {
...
}
`

With Sass:
`sass
.js-button {
@include pseudo-class(hover) {
...
}
}
`

$3

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.

`html



`

For exemple, to color the background in grey or the link in red when you click on them.
`css
.parent.pseudo-class--active {
background: grey;
}

.child.pseudo-class--active {
color: red;
}
`

With Sass:
`sass
.parent {
@include pseudo-class(active) {
background: grey;
}
}

.child {
@include pseudo-class(active) {
color: red;
}
}
``

Licence

This module is under the Apache 2.0 Licence.
Please refer to the LICENCE file for more details.

Made with :heart: in Paris