Awesome
Angular Star Rating ⭐⭐⭐⭐⭐
⭐ Angular Star Rating is a Angular 10+ component made with ❤, based on css only techniques. ⭐
Angular Star Rating is a Angular 10+ component made with ❤.
It is based on best practice UX/UI methods, accessibility in mind and an eye for details. In love with reactive forms, the component is easy to control over the keyboard. It is a perfect fit for all angular projects with ⭐'s.
To keep it as flexible as possible a major part of the logic is based on css only techniques. The component simple applies the state depending css modifiers.
Browser support
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
| >11 | >50 | >55 | >10 | >41 |
| <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/ie.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/firefox.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/chrome.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/safari.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/opera.png" width="100"> |
Features
Fully featured this component is provided with:
- easy configurable and reasonable defaults
- all 12 css modifiers of the awesome css only star rating library
- it integrates well with reactive forms and all it's states
- focus and blur events are handled for a smooth keyboard navigation
- it's keyboard control is even better than a native input once :-)
- mouse enter and leave events are used to generate a nice on hover interaction
- importable as a angular ngModule it is a plug and play to use
- and is tested for AOT
Related Projects
| Css | Angular 1 | Angular | Ionic 1 |
|---|---|---|---|
| <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/family/css3.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/family/angular1.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/family/angular.png" width="80"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/family/ionic1.png" width="80"> |
| Css Star Rating | Angular1 Star Rating | Angular Star Rating | Ionic1 Star Rating |
DEMO
Documentation
- Installing
- Customizing Styles
- Property bindings
- Event bindings
- Use it with reactive forms
- Custom configuration
Versioning
This project will be maintained under the Semantic Versioning guidelines.
Given a version number MAJOR.MINOR.PATCH-PRE-RELEASE, increment the:
- MAJOR version when you make incompatible API changes,
- MINOR version when you add functionality in a backwards-compatible manner, and
- PATCH version when you make backwards-compatible bug fixes.
- PRE-RELEASE and build metadata as extensions to the MAJOR.MINOR.PATCH format (1.0.0-beta.0).
Find information on SemVer under semver.org.
License
MIT © Michael Hladky