Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-retro-grid
A simple component library to create a container with an animated background.
https://github.com/omnedia/ngx-retro-grid
Last synced: 15 days ago
JSON representation
A simple component library to create a container with an animated background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-retro-grid
- Owner: omnedia
- License: mit
- Created: 2024-08-14T12:07:19.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-24T18:29:03.000Z (4 months ago)
- Last Synced: 2024-11-16T22:20:48.579Z (26 days ago)
- Language: TypeScript
- Size: 9.77 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-retro-grid (⭐0) - This component creates a 3D perspective grid with customizable colors, rotation, and smooth animation, perfect for adding a nostalgic or futuristic visual effect to your application. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-retro-grid - This component creates a 3D perspective grid with customizable colors, rotation, and smooth animation, perfect for adding a nostalgic or futuristic visual effect to your application. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-retro-grid - This component creates a 3D perspective grid with customizable colors, rotation, and smooth animation, perfect for adding a nostalgic or futuristic visual effect to your application. (Table of contents / Third Party Components)
README
# ngx-retro-grid
`@omnedia/ngx-retro-grid` is an Angular library that provides a retro-styled grid background animation for Angular components. This component creates a 3D perspective grid with customizable colors, rotation, and smooth animation, perfect for adding a nostalgic or futuristic visual effect to your application.
## Features
- Retro grid animation with customizable grid color, fade color, and grid rotation.
- Flexible configuration to match the style of your application.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-retro-grid
```
## Usage
Import the NgxRetroGridComponent in your Angular module or component:
```typescript
import { NgxRetroGridComponent } from '@omnedia/ngx-retro-grid';
@Component({
...
imports: [
...
NgxRetroGridComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- gridColor (optional): The color of the grid lines in the background. Accepts a hex color code.
- fadeColor (optional): The color used for the fading effect in the background. Accepts any valid CSS color value.
- gridRotation (optional): The rotation angle for the grid. Accepts any valid CSS rotation value (e.g., '35deg', '45deg').
- styleClass (optional): A custom CSS class to apply to the component's wrapper element.
## Example
```html
This is a retro grid background
```
This will create a retro grid background with a cyan grid, a dark blue fading effect, and a 45-degree rotation for the grid.
## Styling
To customize the appearance of the grid or the container, use the styleClass input to apply your own CSS classes.
```css
.example-class {
padding: 20px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
```
## 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.