Grid pattern with customizable colors
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-gridpattern
A simple component library to create a container with an pattern background.
https://github.com/omnedia/ngx-gridpattern
Last synced: about 2 months ago
JSON representation
A simple component library to create a container with an pattern background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-gridpattern
- Owner: omnedia
- License: mit
- Created: 2024-08-25T13:21:37.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-29T03:56:32.000Z (5 months ago)
- Last Synced: 2024-11-09T03:07:22.486Z (2 months ago)
- Language: TypeScript
- Size: 6.84 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-gridpattern (⭐3) - A simple component library to create a container with an pattern background. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-gridpattern - A simple component library to create a container with an pattern background. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-gridpattern - A simple component library to create a container with an pattern background. (Table of contents / Third Party Components)
README
# ngx-gridpattern
`@omnedia/ngx-gridpattern` is an Angular library that provides a customizable grid pattern background. The component allows for the easy customization of grid and gradient colors, making it a great addition for adding visually engaging backgrounds to sections of your Angular application.
## Features
- Customizable SVG grid pattern with adjustable colors.
- Gradient background that can be customized independently of the grid pattern.
- Lightweight and easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-gridpattern
```
## Usage
Import the `NgxGridpatternComponent` in your Angular module or component:
```typescript
import { NgxGridpatternComponent } from '@omnedia/ngx-gridpattern';
@Component({
...
imports: [
...
NgxGridpatternComponent,
],
...
})
```
Use the component in your template:
```html
Welcome to Grid Patterns
```
## How It Works
- Grid and Gradient Colors: The grid and gradient colors are independently adjustable via the gridColor and gradientColor inputs. This allows for a wide range of styling possibilities.
- Global and Custom Styling: The .om-gridpattern container can be styled globally or with a custom styleClass. The content inside the component will retain its original styling.
## API
```html
```
- `gridColor` (optional): The color of the grid lines. Accepts any valid CSS color value (e.g., 'rgba(255, 255, 255, 0.5)').
- `gradientColor` (optional): The background color of the gradient overlay. Accepts any valid CSS color value (e.g., '#ff69b4').
- `smallGrid` (optional): Makes the grid columns smaller. Defaults to false.
- `styleClass` (optional): A custom CSS class to apply to the .om-gridpattern container for additional styling.
## Example
```html
```
This will create a grid background with cyan grid lines and a black gradient overlay.
## 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.