https://github.com/maxime1992/ngx-hover-opacity
Angular module and component to help you display a nice hover effect on some HTML parts of your app.
https://github.com/maxime1992/ngx-hover-opacity
angular angular-library
Last synced: 5 months ago
JSON representation
Angular module and component to help you display a nice hover effect on some HTML parts of your app.
- Host: GitHub
- URL: https://github.com/maxime1992/ngx-hover-opacity
- Owner: maxime1992
- License: mit
- Created: 2017-08-25T21:48:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-13T13:21:26.000Z (almost 3 years ago)
- Last Synced: 2024-12-06T21:55:22.991Z (about 1 year ago)
- Topics: angular, angular-library
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/ngx-hover-opacity
- Size: 545 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ngx-hover-opacity
This librairy aims to provide a simple way to visually "disable" an entire HTML element.
For example, if you display a given resource and suddenly it's not available anymore (deleted on the server and you just received an event).
Should you redirect the user to the home page? If he was reading it, it's a little rough, isn't it?
Instead of that, you might want to hover it, with a nice opacity, so the user cannot interact with it anymore.
(Maybe you could also let him know what's happening with a message, but it's up to you).
## Demo:
ngx-hover-opacity set to **OFF**
ngx-hover-opacity set to **ON**
You can also [try it live on Stackblitz!](https://stackblitz.com/edit/ngx-hover-opacity)
## Installation
To install this library, run:
```bash
$ yarn add ngx-hover-opacity
```
or
```bash
$ npm install ngx-hover-opacity --save
```
## Setup with Angular
From your Angular module (`AppModule` for example):
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// import the module
import { NgxHoverOpacityModule } from 'ngx-hover-opacity';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
// specify it as an import
NgxHoverOpacityModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Once your library is imported, you can use the component `ngx-hover-opacity` in your Angular application:
```html
Your content that might get hidden
```
## License
MIT © [Maxime ROBERT](mailto:maxime.robert1992@gmail.com)