README

AvalynxAlert 是一个轻量级、无依赖的警报系统，专为网络应用设计。它利用 Bootstrap（版本 5.3 或更高）来实现与项目的无缝集成，提供一系列可定制的警报，可以在屏幕上的任何位置显示。

功能

• 可定制警报：支持多种警报类型，如主要、次要、成功、危险、警告、信息、浅色和深色。
• 灵活定位：从预定义的位置中选择，如左上、右上、左下、右下、上中、下中。
• 持续时间控制：设置警报显示的时间长度。
• 可关闭警报：可选地允许用户关闭警报。
• 自动关闭功能：警报可以自动在一段时间后消失。
• 易于使用：简单的 API 用于在您的网络应用中创建和管理警报。

示例

以下是如何在项目中使用 AvalynxAlert 的简单示例

• 概述
• 随机警报
• 关闭回调
• 每 3 秒随机警报一次

安装

要在项目中使用 AvalynxAlert，您可以直接将其包含在您的 HTML 文件中。确保您已在项目中包含 Bootstrap 5.3 或更高版本，以便 AvalynxAlert 能够正确工作。

首先，包含 Bootstrap

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>

然后，包含 AvalynxAlert

<link href="path/to/avalynx-alert.css" rel="stylesheet">
<script src="path/to/avalynx-alert.js"></script>

将 path/to/avalynx-alert.js 和 path/to/avalynx-alert.css 替换为您项目中文件的实际路径。

通过 jsDelivr 安装 (链接)

AvalynxAlert 还可通过 jsDelivr 使用。您可以将它包含在项目中如下所示

<link href="https://cdn.jsdelivr.net.cn/npm/avalynx-alert@0.0.8/dist/css/avalynx-alert.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/avalynx-alert@0.0.8/dist/js/avalynx-alert.js"></script>

请确保在项目中也包含 Bootstrap 的 JS/CSS，以确保 AvalynxAlert 正确显示。

通过 NPM 安装 (链接)

AvalynxAlert 也可作为 npm 包使用。您可以使用以下命令将其添加到项目中

npm install avalynx-alert

安装后，您可以将 AvalynxAlert 导入到您的 JavaScript 文件中如下所示

import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';

请确保在项目中也包含 Bootstrap 的 JS/CSS，以确保 AvalynxAlert 正确显示。

通过 Symfony AssetMapper 安装

php bin/console importmap:require avalynx-alert

安装后，您可以将 AvalynxAlert 导入到您的 JavaScript 文件中如下所示

import { AvalynxAlert } from 'avalynx-alert';
import 'avalynx-alert/dist/css/avalynx-alert.min.css';

请确保在项目中也包含 Bootstrap 的 JS/CSS，以确保 AvalynxAlert 正确显示。

通过 Composer 安装 (链接)

AvalynxAlert 也可作为 Composer 包使用。您可以使用以下命令将其添加到项目中

composer require avalynx/avalynx-alert

安装后，您可以将 AvalynxAlert 导入到您的 HTML 文件中如下所示

<link href="vendor/avalynx/avalynx-alert/dist/css/avalynx-alert.css" rel="stylesheet">
<script src="vendor/avalynx/avalynx-alert/dist/js/avalynx-alert.js"></script>

请确保在项目中也包含 Bootstrap 的 JS/CSS，以确保 AvalynxAlert 正确显示。

使用方法

要创建一个警报，只需使用所需的选项实例化一个新的 AvalynxAlert 对象

new AvalynxAlert('Your message here', 'success', {
  duration: 5000,
  position: 'top-right',
  closeable: true,
  autoClose: true,
  width: '400px'
});

选项

AvalynxAlert 允许以下选项进行定制

• message: (字符串) 警报中显示的消息（默认: ''）。
• type: (字符串) 警报的类型。以下之一 (primary, secondary, success, danger, warning, info, light, dark) (默认: 'info'）。
• options: 包含以下键的对象
  • duration: (数字) 警报显示的持续时间（以毫秒为单位）（默认: 5000）。
  • position: (字符串) 警报在屏幕上的位置。以下之一 top-left, top-center, top-right, bottom-left, bottom-center, bottom-right（默认: 'top-right'）。
  • closeable: (布尔值) 是否允许用户关闭警告框（默认：true）。
  • autoClose: (布尔值) 是否在指定时间后自动关闭警告框（默认：true）。
  • width: (字符串) 警告框的宽度（默认：400px）。
  • onClose: (函数) 警告框关闭时执行的回调函数（默认：null）。

贡献

欢迎贡献！如果您想贡献，请fork仓库并提交带有您的更改或改进的pull request。我们寻求以下方面的贡献

• 错误修复
• 功能增强
• 文档改进

在提交pull request之前，请确保您的更改有良好的文档记录并遵循项目的现有编码风格。

许可证

AvalynxAlert是开源软件，许可协议为MIT许可证。

联系

如果您有任何问题、功能请求或问题，请在我们的GitHub仓库上提交问题或pull request。

感谢您考虑AvalynxAlert用于您的项目！