Growl Widget Growl.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

A widget that turns standard Bootstrap alerts into "Growl-like" notifications. This widget is a wrapper for the Bootstrap Growl plugin by remabledesigns. The widget offers various features including

  • Alert Positioning: Position and align growl notifications at any corner of your page.
  • Icon & Title Section: Ability to set a stylish title separator section and add an icon and title for each alert as a header.
  • Fade: Ability to set a fade duration to automatically fade out the alerts after display.
  • Plugin Configuration: Ability to configure various options by passing parameters to the JQuery plugin.

Important

This widget can be also installed in isolation outside this bundle if needed. In addition to using via \kartik\widgets namespace, this widget can be also installed from the yii2-widget-growl repository and can also be accessed via \kartik\growl\Growl namespace.

Growl Demo (Configure)


 
 
use kartik\widgets\Growl;

echo Growl::widget([
    'type' => Growl::TYPE_SUCCESS,
    'title' => 'Well done!',
    'icon' => 'glyphicon glyphicon-ok-sign',
    'body' => 'You successfully read this important alert message.',
    'showSeparator' => true,
    'delay' => 0,
    'pluginOptions' => [
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_INFO,
    'title' => 'Heads up!',
    'icon' => 'glyphicon glyphicon-info-sign',
    'body' => 'This alert needs your attention, but it\'s not super important.',
    'showSeparator' => true,
    'delay' => 1500,
    'pluginOptions' => [
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_WARNING,
    'title' => 'Warning!',
    'icon' => 'glyphicon glyphicon-exclamation-sign',
    'body' => 'Better check yourself, you\'re not looking too good.',
    'showSeparator' => true,
    'delay' => 3000,
    'pluginOptions' => [
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_DANGER,
    'title' => 'Oh snap!',
    'icon' => 'glyphicon glyphicon-remove-sign',
    'body' => 'Change a few things up and try submitting again.',
    'showSeparator' => true,
    'delay' => 4500,
    'pluginOptions' => [
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_GROWL,
    'title' => 'Roar!',
    'icon' => '/images/growl_64x.png',
    'body' => 'This is a default growling alert you requested for.',
    'showSeparator' => false,
    'delay' => 6000,
    'pluginOptions' => [
        'icon_type'=>'image',
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ],
        'template' => [
            'icon_type' => 'image'
        ]
    ]
]);

The widget provides a wrapper for the Bootstrap Growl JQuery Plugin . Refer the plugin documentation for more details. The following parameters are important:

  • type: string the type of the growl widget. Defaults to 'alert-info' or Growl::TYPE_INFO. You can select one of the following options:

    • Growl::TYPE_INFO: Sets it to 'alert-info' CSS class.

    • Growl::TYPE_DANGER: Sets it to 'alert-danger' CSS class.

    • Growl::TYPE_SUCCESS: Sets it to 'alert-success' CSS class.

    • Growl::TYPE_WARNING: Sets it to 'alert-warning' CSS class.

    • Growl::TYPE_GROWL: Sets it to 'alert-growl' CSS class. This will display a growl notification similar to ones seen in Apple Mac OS.

    • Growl::TYPE_CUSTOM: Use this for setting no style and adding your own custom style. You can pass in any style/class settings to the options to style your alert.

  • icon: string the class name for the icon to be displayed in the title section. If you want to display an image - you can set an image source here and set the icon_type property to image in pluginOptions['template']

  • title: string display a title for the growl (this is not HTML encoded). This will help display a title with a message separator and an optional bootstrap icon. If this is null or not set, it will not be displayed.

  • linkUrl: string the url to redirect to on clicking the alert. If this is null or not set, the alert will not be clickable.

  • showSeparator: boolean whether to show the title separator. Only applicable if title is set.

  • body: string the alert message body.

  • delay: integer|boolean time in milliseconds after which each growl is displayed and auto-hidden. If set to 0 or false, it means unlimited delay. This property is slightly different than the pluginOptions['delay'], whereby this property delays the display of each alert as opposed to just delay in fading out.

  • closeButton: array the options for displaying the dismiss or closeButton. This parameter is to be set similar to the closeButton option in Yii Bootstrap Alert Widget.

  • useAnimation: boolean whether to use animation effects. If set to true, will load AnimateAsset asset bundle. Defaults to true

  • iconOptions: array the HTML attributes for the growl icon container.

  • titleOptions: array the HTML attributes for the growl title container.

  • bodyOptions: array the HTML attributes for the growl message body.

  • linkOptions: array the HTML attributes for the growl url link.

  • pluginOptions: array the bootstrap growl plugin configuration options. Refer the plugin documentation or examples on the options you can set for this plugin.

  • options: array the HTML attributes for the growl alert container.