Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-shine-border
A simple component library to create a container with an animated border.
https://github.com/omnedia/ngx-shine-border
Last synced: about 1 month ago
JSON representation
A simple component library to create a container with an animated border.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-shine-border
- Owner: omnedia
- License: mit
- Created: 2024-08-14T09:56:23.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-22T14:32:14.000Z (5 months ago)
- Last Synced: 2024-11-01T09:49:07.839Z (2 months ago)
- Language: SCSS
- Size: 6.84 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-shine-border (⭐1) - An Angular library that provides a dynamic and customizable animated border effect for Angular components. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-shine-border - An Angular library that provides a dynamic and customizable animated border effect for Angular components. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-shine-border - An Angular library that provides a dynamic and customizable animated border effect for Angular components. (Table of contents / Third Party Components)
README
# ngx-shine-border
`@omnedia/ngx-shine-border` 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-shine-border
```
## Usage
Import the `NgxShineBorderComponent` in your Angular module or component:
```typescript
import { NgxShineBorderComponent } from '@omnedia/ngx-shine-border';
@Component({
...
imports: [
...
NgxShineBorderComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- gradientColorStart: (optional) The starting color of the border's gradient.
- gradientColorMiddle: (optional) The middle 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.