Yii2 provides a powerful and flexible widget system that allows developers to create reusable UI components. Widgets are a type of reusable component that encapsulates a specific functionality and can be easily included in views. Yii2 comes with a set of built-in widgets, but you can also create custom widgets as needed.
Widgets in Yii2 are small, reusable components that help in rendering content dynamically. They are implemented as PHP classes extending yii\base\Widget. When a widget is used, Yii2 instantiates it, runs its logic, and outputs the result.
Widgets in Yii2 follow this structure:
Yii2 provides several built-in widgets, including:
yii\widgets\ActiveFormyii\widgets\ListViewyii\widgets\DetailViewyii\grid\GridViewyii\widgets\Menuyii\widgets\Breadcrumbsuse yii\widgets\ActiveForm;
use yii\helpers\Html;
$form = ActiveForm::begin();
echo $form->field($model, 'username');
echo $form->field($model, 'email');
echo Html::submitButton('Submit', ['class' => 'btn btn-primary']);
ActiveForm::end();This widget simplifies form creation and validation using Yii2's model system.
Sometimes, built-in widgets do not fulfill all requirements, and custom widgets are needed. Below is an example of a custom widget.
yii\base\Widget.run() method.namespace app\components;
use yii\base\Widget;
use yii\helpers\Html;
class HelloWidget extends Widget
{
public $message;
public function init()
{
parent::init();
if ($this->message === null) {
$this->message = 'Hello, World!';
}
}
public function run()
{
return Html::tag('h1', Html::encode($this->message), ['class' => 'hello-widget']);
}
}use app\components\HelloWidget;
echo HelloWidget::widget(['message' => 'Welcome to Yii2!']);This will output:
<h1 class="hello-widget">Welcome to Yii2!</h1>Below is a real-world example of a Profile Menu Widget, commonly used in dashboards to show user information and options.
ProfileMenu.php)namespace fdcore\widgets;
use Yii;
use yii\base\Widget;
class ProfileMenu extends Widget
{
public $active_url;
public $display = true;
public $show_changepassword = true;
public $show_darkmode_icon = false;
public function run()
{
if (!Yii::$app->user->identity) {
$this->display = false;
}
if ($this->display) {
return $this->render('profilemenu', [
'show_changepassword' => $this->show_changepassword,
'show_darkmode_icon' => $this->show_darkmode_icon,
]);
}
}
}profilemenu.php)<?php if ($show_darkmode_icon) { ?>
<li class="dropdown nav-item">
<a class="nav-link theme-layout layout-setting">
<span class="dark-layout">🌙</span>
<span class="light-layout">☀️</span>
</a>
</li>
<?php } ?>
<li class="dropdown main-profile-menu">
<a class="nav-link profile-user" href="#" data-bs-toggle="dropdown">
<img src="/images/profile.jpg" alt="">
</a>
<div class="dropdown-menu">
<div class="menu-header-content p-3 border-bottom">
<div class="d-flex">
<div class="main-img-user">
<img src="/images/profile.jpg" alt="">
</div>
<div class="ms-3 my-auto">
<h6 class="tx-15"> <?= Yii::$app->user->identity->fullname ?? '' ?> </h6>
<span class="tx-12"> <?= Yii::$app->user->identity->username ?? '' ?> </span>
</div>
</div>
</div>
<?php if ($show_changepassword) { ?>
<a class="dropdown-item popupButton" value="/site/changepassword"><i class="fa fa-key"></i> Change Password</a>
<?php } ?>
<a class="dropdown-item" href="/site/logout" data-method="post">
<i class="far fa-arrow-alt-circle-left"></i> Sign Out
</a>
</div>
</li>echo ProfileMenu::widget(['show_changepassword' => true, 'show_darkmode_icon' => true]);This widget dynamically displays a profile menu based on user authentication and provides options to log out or change the password.
Yii2 widgets are an essential feature for building reusable UI components. This tutorial covered:
By mastering Yii2 widgets, you can create modular and maintainable web applications.
Sign in to join the discussion and post comments.
Sign in