Growl supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the Growl::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set Growl::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set Growl::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set Growl::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-growl extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-widget-growl "dev-master"

"kartik-v/yii2-widget-growl": "dev-master"

use kartik\widgets\Growl;

echo Growl::widget([
    'type' => Growl::TYPE_SUCCESS,
    'title' => 'Well done!',
    'icon' => 'fas fa-check-circle',
    'body' => 'You successfully read this important alert message.',
    'showSeparator' => true,
    'delay' => 0,
    'pluginOptions' => [
        'showProgressbar' => true,
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_INFO,
    'title' => 'Heads up!',
    'icon' => 'fas fa-info-circle',
    'body' => 'This alert needs your attention, but it\'s not super important.',
    'showSeparator' => true,
    'delay' => 1500,
    'pluginOptions' => [
        'showProgressbar' => true,
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_WARNING,
    'title' => 'Warning!',
    'icon' => 'fas fa-exclamation-circle',
    'body' => 'Better check yourself, you\'re not looking too good.',
    'showSeparator' => true,
    'delay' => 3000,
    'pluginOptions' => [
        'showProgressbar' => true,
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ]
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_DANGER,
    'title' => 'Oh snap!',
    'icon' => 'fas fa-times-circle',
    'body' => 'Change a few things up and try submitting again.',
    'showSeparator' => true,
    'delay' => 4500,
    'pluginOptions' => [
        'showProgressbar' => true,
        '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',
        'showProgressbar' => false,
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ],
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_MINIMALIST,
    'title' => 'Kartik Visweswaran',
    'icon' => '/images/kartik.png',
    'iconOptions' => ['class'=>'img-circle pull-left'],
    'body' => 'Momentum reduce child mortality effectiveness incubation empowerment connect.',
    'showSeparator' => false,
    'delay' => 7500,
    'pluginOptions' => [
        'icon_type'=>'image',
        'showProgressbar' => false,
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ],
    ]
]);
echo Growl::widget([
    'type' => Growl::TYPE_PASTEL,
    'title' => 'Email: Erica Fisher',
    'icon' => '/images/growl_64x.png',
    'body' => 'Investment, stakeholders micro-finance equity health Bloomberg; global citizens climate change. ' . 
        'Solve positive social change sanitation, opportunity insurmountable challenges...',
    'showSeparator' => false,
    'delay' => 9000,
    'progressBarOptions' => ['class'=>'progress-bar-warning'],
    'pluginOptions' => [
        'showProgressbar' => true,
        'icon_type'=>'image',
        'placement' => [
            'from' => 'top',
            'align' => 'right',
        ],
    ]
]);

• 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_MINIMALIST: Sets it to 'alert-minimalist' CSS class. Minimalist Notify Notification By Danny Keane.

  • Growl::TYPE_PASTEL: Sets it to 'alert-pastel' CSS class. Simple Pastel Notify Theme By Mark Gilliland.

  • 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

• 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.

• linkTarget: string the target to open the linked notification. Defaults to '_blank'.

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

• body: string the alert message body.

• progressBarOptions: array the HTML attributes for the bootstrap progress bar. You can control the pluginOptions['showProgressBar'] property to show the progress bar. The following special options are recognized:

  • title: string the title text to be displayed within the progress bar. Defaults to empty string. You can set it for example to something like <span class="sr-only">97%<span>

  This defaults to:

  [
      'role' => 'progressbar',
      'aria-valuenow' => '0',
      'aria-valuemin' => '0',
      'aria-valuemax' => '100',
      'style' => '100',
  ]
  

• 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.

• progressContainerOptions: array the HTML attributes for the progress bar container.

• 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.