https://github.com/omnedia/ngx-neon-underline
A simple component library to create a neon underline.
https://github.com/omnedia/ngx-neon-underline
Last synced: about 2 months ago
JSON representation
A simple component library to create a neon underline.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-neon-underline
- Owner: omnedia
- License: mit
- Created: 2024-08-21T09:56:29.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-12-12T01:40:46.000Z (5 months ago)
- Last Synced: 2025-02-27T04:50:19.596Z (3 months ago)
- Language: SCSS
- Size: 5.86 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-neon-underline (⭐0) - An Angular library that provides a glowing neon underline effect for your components. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-neon-underline - An Angular library that provides a glowing neon underline effect for your components. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-neon-underline - An Angular library that provides a glowing neon underline effect for your components. (Table of contents / Third Party Components)
README
# ngx-neon-underline
This Library is part of the NGXUI ecosystem.
View all available components at https://ngxui.com
`@omnedia/ngx-neon-underline` is an Angular library that provides a glowing neon underline effect for your components. The component allows for customization of the colors and width of the underline, making it perfect for adding a striking visual effect to text, headers, or any other elements in your Angular application.
## Features
- Neon underline effect with customizable colors and width.
- Easy to integrate as a standalone component.
- Adds a glowing, animated underline that can enhance your design.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-neon-underline
```
## Usage
Import the `NgxNeonUnderlineComponent` in your Angular module or component:
```typescript
import {NgxNeonUnderlineComponent} from '@omnedia/ngx-neon-underline';
@Component({
...
imports:
[
...
NgxNeonUnderlineComponent,
],
...
})
```
Use the component in your template:
```html
```
## API
```html
```
- `middleColor` (optional): The color of the middle, brighter part of the neon underline. Accepts any valid CSS color value (e.g., '#0ea5e9').
- `sideColor` (optional): The color of the side glows of the neon underline. Accepts any valid CSS color value (e.g., '#6366f1').
- `width` (optional): The width of the underline as a percentage or other CSS width value (e.g., '75%').
- `styleClass` (optional): A custom CSS class to apply to the underline wrapper element.
## Example
```html
```
This will create a neon underline effect with custom colors and a width of 60% of the parent element's width.
## Styling
To further customize the appearance of the underline, use the styleClass input to apply your own CSS classes. Here's an example:
```css
.neon-underline-custom {
margin: 20px 0;
}
.neon-underline-custom .om-neon-underline-color-1,
.neon-underline-custom .om-neon-underline-color-2 {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
```
This example adds a pulsing animation to the neon underline for an enhanced effect.
## Contributing
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
## License
This project is licensed under the MIT License.