This Library is part of the NGXUI ecosystem.
View all available components at https://ngxui.com

@omnedia/ngx-dotpattern is an Angular library that provides a customizable dot pattern background effect for your Angular components. The component creates a pattern of dots across the background, with the color and styling easily configurable, making it an eye-catching visual element for your application.

• Dot pattern background with customizable color.
• Lightweight and easy to integrate as a standalone component.
• Suitable for adding decorative backgrounds to your Angular components.

Install the library using npm:

npm install @omnedia/ngx-dotpattern

Import the NgxDotpatternComponent in your Angular module or component:

import {NgxDotpatternComponent} from '@omnedia/ngx-dotpattern';
@Component({
  ...
    imports:
[
  ...
    NgxDotpatternComponent,
],
...
})

Use the component in your template:

<om-dotpattern
  [patternColor]="'#ffcc00'"
  styleClass="custom-pattern-class"
>
  <div>Your content here</div>
</om-dotpattern>

<om-dotpattern
  [patternColor]="patternColor"
  styleClass="your-custom-class"
>
  <ng-content></ng-content>
</om-dotpattern>

• patternColor (optional): The color of the dot pattern. Accepts any valid CSS color value (e.g., '#ffcc00', rgba(255, 204, 0, 0.8)).
• styleClass (optional): A custom CSS class to apply to the component's wrapper element.

<om-dotpattern
  [patternColor]="'#00ffcc'"
  styleClass="dotpattern-background"
>
  <div class="content">This is a dot pattern background effect</div>
</om-dotpattern>

This will create a dot pattern background with cyan-colored dots across the background of the component.

To customize the appearance of the dot pattern or the container, use the styleClass input to apply your own CSS classes.

.dotpattern-background {
  background-color: #000;
  height: 100vh;
  position: relative;
}
.content {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 50px;
}

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

This project is licensed under the MIT License.