https://github.com/omnedia/ngx-border-beam
A simple component library to create a container with an animated border.
https://github.com/omnedia/ngx-border-beam
Last synced: about 2 months ago
JSON representation
A simple component library to create a container with an animated border.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-border-beam
- Owner: omnedia
- License: mit
- Created: 2024-08-14T07:36:50.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-12-12T01:40:56.000Z (5 months ago)
- Last Synced: 2025-02-27T07:41:14.787Z (3 months ago)
- Language: SCSS
- Size: 9.77 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-border-beam (⭐1) - This component allows you to create a glowing, animated border that can be customized in terms of colors, border radius, and animation duration. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-border-beam - This component allows you to create a glowing, animated border that can be customized in terms of colors, border radius, and animation duration. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-border-beam - This component allows you to create a glowing, animated border that can be customized in terms of colors, border radius, and animation duration. (Table of contents / Third Party Components)
README
# ngx-border-beam
This Library is part of the NGXUI ecosystem.
View all available components at https://ngxui.com
`@omnedia/ngx-border-beam` is an Angular library that provides a dynamic and customizable animated border effect for Angular components. This component allows you to create a glowing, animated border that can be customized in terms of colors, border radius, and animation duration.
## Features
- Animated border effect with customizable gradient colors.
- Flexible configuration for border radius, border color, and animation speed.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-border-beam
```
## Usage
Import the `NgxBorderBeamComponent` in your Angular module or component:
```typescript
import {NgxBorderBeamComponent} from '@omnedia/ngx-border-beam';
@Component({
...
imports:
[
...
NgxBorderBeamComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- gradientColorStart: (optional) The starting color of the border's gradient.
- gradientColorEnd: (optional) The ending color of the border's gradient.
- borderRadius: (optional) The border radius of the component. Accepts any valid CSS border-radius value.
- borderColor: (optional) The color of the border.
- animationDuration: (optional) The duration of the border animation. Accepts any valid CSS time value (e.g., 12s).
- styleClass: (optional) A custom CSS class to apply to the component's wrapper element.
## Example
```html
Highlighted Heading
```
This will create a glowing, animated border around the heading with a custom gradient, border radius, and animation speed.
## Styling
To customize the appearance of the border or container, use the styleClass input to apply your own CSS classes.
```css
.example-class {
padding: 10px;
background-color: #f0f0f0;
}
```
## 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.