Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avalynx/avalynx-alert
AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
https://github.com/avalynx/avalynx-alert
alert avalynx bootstrap bootstrap5 component notification popup
Last synced: about 2 months ago
JSON representation
AvalynxAlert is a simple alert system for web applications. Based on Bootstrap >=5.3 without any framework dependencies.
- Host: GitHub
- URL: https://github.com/avalynx/avalynx-alert
- Owner: avalynx
- License: mit
- Created: 2024-02-21T09:57:36.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-10-07T09:35:56.000Z (3 months ago)
- Last Synced: 2024-10-08T17:53:34.948Z (3 months ago)
- Topics: alert, avalynx, bootstrap, bootstrap5, component, notification, popup
- Language: JavaScript
- Homepage:
- Size: 148 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# AvalynxAlert
AvalynxAlert is a lightweight, dependency-free alert system designed for web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project, offering a range of customizable alerts that can be positioned anywhere on the screen.
## Features
- **Customizable Alerts**: Supports various alert types like primary, secondary, success, danger, warning, info, light, and dark.
- **Flexible Positioning**: Choose from predefined positions such as top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
- **Duration Control**: Set the duration for how long the alert should be displayed.
- **Closeable Alerts**: Optionally allow users to close alerts.
- **AutoClose Functionality**: Alerts can automatically disappear after a certain period.
- **Easy to Use**: Simple API for creating and managing alerts within your web applications.
## Example
Here's a simple example of how to use AvalynxAlert in your project:
* [Overview](https://avalynx-alert.jbs-newmedia.de/examples/index.html)
* [Random alerts](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html)
* [Callback on close](https://avalynx-alert.jbs-newmedia.de/examples/callback-onclose.html)
* [Random alerts every 3 seconds](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts-every-3s.html)
## Installation
To use AvalynxAlert in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxAlert to work correctly.
First, include Bootstrap:
```html
```
Then, include AvalynxAlert:
```html
```
Replace `path/to/avalynx-alert.js` and `path/to/avalynx-alert.css` with the actual path to the files in your project.
## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-alert/))
AvalynxAlert is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:
```html
```
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-alert))
AvalynxAlert is also available as a npm package. You can add it to your project with the following command:
```bash
npm install avalynx-alert
```
After installing, you can import AvalynxAlert into your JavaScript file like this:
```javascript
import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';
```
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
## Installation via Symfony AssetMapper
```bash
php bin/console importmap:require avalynx-alert
```
After installing, you can import AvalynxAlert into your JavaScript file like this:
```javascript
import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';
```
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-alert))
AvalynxAlert is also available as a Composer package. You can add it to your project with the following command:
```bash
composer require avalynx/avalynx-alert
```
After installing, you can import AvalynxAlert into your HTML file like this:
```html
```
Make sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.
## Usage
To create an alert, simply instantiate a new `AvalynxAlert` object with the desired options:
```javascript
new AvalynxAlert('Your message here', 'success', {
duration: 5000,
position: 'top-right',
closeable: true,
autoClose: true,
width: '400px'
});
```
## Options
AvalynxAlert allows the following options for customization:
- `message`: (string) The message to display in the alert (default: `''`).
- `type`: (string) The type of alert. One of (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`) (default: `'info'`).
- `options`: An object containing the following keys:
- `duration`: (number) Duration in milliseconds for the alert to be displayed (default: `5000`).
- `position`: (string) Position of the alert on the screen. One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (default: `'top-right'`).
- `closeable`: (boolean) Whether the alert can be closed by the user (default: `true`).
- `autoClose`: (boolean) Whether the alert will close automatically after the duration (default: `true`).
- `width`: (string) The width of the alert (default: `400px`).
- `onClose`: (function) A callback function to execute when the alert is closed (default: `null`).
## Contributing
Contributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:
- Bug fixes
- Feature enhancements
- Documentation improvements
Before submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.
## License
AvalynxAlert is open-sourced software licensed under the [MIT license](LICENSE).
## Contact
If you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-alert/issues) or submit a pull request.
Thank you for considering AvalynxAlert for your project!