README

#为 Yii2 提供的 Bootstrap Notify 警报

Bootstrap Notify 的 Yii2 flash 消息。

这个扩展仅仅是将 Bootstrap Notify 的 JavaScript 和 Animate.css 样式封装在一个小小的扩展中。这个扩展旨在将 Bootstrap Notify 的功能带给 Yii2，而不增加额外的增强或开销。只需在你的布局中添加 use justinvoelker\bootstrapnotifyalert\FlashAlert; 语句，然后调用小部件 <?= FlashAlert::widget() ?> 就可以开始使用了。当然，还可以指定一些选项来调整设置。

##安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一：

php composer.phar require --prefer-dist justinvoelker/yii2-bootstrapnotifyalert "*"

或者

"justinvoelker/yii2-bootstrapnotifyalert": "*"

将其添加到你的 composer.json 文件的 require 部分。

##配置

在你的 assets\AppAsset 文件中将 justinvoelker\bootstrapnotifyalert\BootstrapNotifyAlertAsset 添加为依赖项。它应该看起来像以下这样：

...
public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
    'justinvoelker\bootstrapnotifyalert\BootstrapNotifyAlertAsset',
];
...

##使用方法

###基本使用

只需在布局文件中添加必要的 use justinvoelker\bootstrapnotifyalert\FlashAlert; 语句，然后调用小部件。

<?= FlashAlert::widget() ?>

###高级使用

与其接受 Bootstrap Notify 指定的默认设置，您可以通过小部件设置任何属性。以下是我经常使用的一些选项：

<?= FlashAlert::widget([
    'showProgressbar' => true,
    'delay' => 10000,
    'mouse_over' => 'pause',
    'placement_from' => 'bottom',
    'placement_align' => 'right',
    'animate_enter' => 'animated fadeInUp',
    'animate_exit' => 'animated fadeOutDown',
]) ?>

如果需要单个消息而不使用 flash 数据，只需指定消息和可选的 type（如果未指定，则类型为 'info'）。

<?= FlashAlert::widget([
    'message' => 'You cannot do that!',
    'type' => 'danger',
    'delay' => 10000,
]) ?>

可能需要多次 echo FlashAlert::widget()，但每个都应有相同的选项。使用 registerAsDefaults 参数设置通知选项，而不需要消息或 flash 数据。

<?= FlashAlert::widget([
    'registerAsDefaults' => true,
    'delay' => 10000,
    'mouse_over' => 'pause',
]) ?>
<?= FlashAlert::widget() ?>

当将 registerAsDefaults 设置为 true 时，请确保始终在之后包含 <?= FlashAlert::widget() ?>，否则将没有警报，只有默认选项。

###真正高级的使用

使用上述 registerAsDefaults 在需要从多个位置触发警报但只想设置一次默认值时非常有用。例如，大多数警报是通过在控制器中设置 flash 消息来触发的。然而，警报也可以通过在视图中直接使用 JavaScript 来触发。默认情况下，Bootstrap Notify Alerts 的所有资源在页面准备好后都会加载。这对于在控制器中设置的警报来说是可以的，但对于某些自定义的、页面特定的 JavaScript 中的警报来说就太晚了。使用 registerPosition 参数可以让我们指定 Flash Alert 逻辑插入页面的位置。

以下是一个实际示例。几乎网站上每个页面都只显示在控制器中设置的警报，并且可以在页面准备好后加载。然而，网站的一个页面需要在视图中的一些自定义 JavaScript 中设置一些警报。在这一个页面中，我们需要在页面晚些时候在自定义 JavaScript 中使用这些资源，并且 Flash Alert 默认值已经注册。为了使我们的正常页面在最后加载一切，但仍然可以在某些页面上较早使用它们，我们可以这样做。

在需要提前注册的视图中，设置一个可以从布局中读取的参数（这个参数可以放在标题和面包屑声明下面）。

$this->params['bootstrapNotifyAlertAssetInHead'] = true;

然后，在主布局中，只有当设置了这个参数时才注册资源（这需要在调用 beginPage() 之前进行）。

if (isset($this->params['bootstrapNotifyAlertAssetInHead'])) {
    $this->registerAssetBundle(justinvoelker\bootstrapnotifyalert\BootstrapNotifyAlertAsset::className(), $this::POS_HEAD);
}

最后，在主布局中，设置 FlashAlert 小部件的 registerPosition，同时设置 registerAsDefaults。

<?= FlashAlert::widget([
    'registerAsDefaults' => true,
    'registerPosition' => (isset($this->params['bootstrapNotifyAlertAssetInHead'])) ? $this::POS_BEGIN : null,
    ...
]) ?>
<?= FlashAlert::widget() ?>

这三个代码片段组合起来，将在视图中设置一个自定义参数，该参数将在布局中使用，以在头部注册 BootstrapNotifyAlertAsset 而不是在文档就绪位置。最后，FlashAlert 设置默认值，将在 body 开始处而不是文档就绪位置设置。最后的 FlashAlert::widget() 将显示控制器中设置的所有警告。此时，除了在视图中我们可以添加 $.notify('User invited',{ type: 'success' }); 并显示一个警告而不重新加载页面外，其他功能将相同。

##可选

可以在您的站点样式中指定额外的 CSS，以进一步定义警告的外观和感觉。要使用以下两种进度条样式之一，需要将 showProgressbar 选项设置为 true。

Bootstrap Notify 文档包括一个特定示例，用于更改进度条的大小和位置，以匹配演示中的外观。

[data-notify="progressbar"] { margin-bottom: 0px; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 5px; }

另一个我经常使用的样式是调整进度条，使其具有平滑的连续动画，而不是开始-停止动作。

[data-notify="progressbar"] .progress-bar { -webkit-transition: width 1s linear; -o-transition: width 1s linear; transition: width 1s linear; }

justinvoelker / yii2-bootstrapnotifyalert

维护者

详细信息

README