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.

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.