https://github.com/omnedia/ngx-dotpattern
A simple component library to create a container with an pattern background.
https://github.com/omnedia/ngx-dotpattern
Last synced: about 1 month ago
JSON representation
A simple component library to create a container with an pattern background.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-dotpattern
- Owner: omnedia
- License: mit
- Created: 2024-08-16T18:46:33.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-12-12T01:41:05.000Z (11 months ago)
- Last Synced: 2025-04-15T02:44:12.337Z (7 months ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-dotpattern (⭐0) - An Angular library that provides a customizable dot pattern background effect for your Angular components. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-dotpattern - An Angular library that provides a customizable dot pattern background effect for your Angular components. (Third Party Components / Animations)
- fucking-awesome-angular - ngx-dotpattern - An Angular library that provides a customizable dot pattern background effect for your Angular components. (Third Party Components / Animations)
README
# ngx-dotpattern
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.
## Features
- Dot pattern background with customizable color.
- Lightweight and easy to integrate as a standalone component.
- Suitable for adding decorative backgrounds to your Angular components.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-dotpattern
```
## Usage
Import the `NgxDotpatternComponent` in your Angular module or component:
```typescript
import {NgxDotpatternComponent} from '@omnedia/ngx-dotpattern';
@Component({
...
imports:
[
...
NgxDotpatternComponent,
],
...
})
```
Use the component in your template:
```html
Your content here
```
## API
```html
```
- 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.
## Example
```html
This is a dot pattern background effect
```
This will create a dot pattern background with cyan-colored dots across the background of the component.
## Styling
To customize the appearance of the dot pattern or the container, use the styleClass input to apply your own CSS classes.
```css
.dotpattern-background {
background-color: #000;
height: 100vh;
position: relative;
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding-top: 50px;
}
```
## 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.