Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 15 days ago
JSON representation

A simple component library to create a container with an pattern background.

Awesome Lists containing this project

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


Grid pattern with customizable colors


```

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.