小部件是可重用的客户端代码，其中包含HTML，CSS和JS。该代码包含最少的逻辑，并包装在yii \ base \ Widget对象中。我们可以轻松地在任何视图中插入并应用该对象。

步骤1-要查看运行中的小部件，请使用以下代码在SiteController中创建一个actionTestWidget函数。

public function actionTestWidget() { 
   return $this->render('testwidget'); 
}

在上面的示例中，我们只返回了一个名为“ testwidget”的视图。

步骤2-现在，在views / site文件夹内，创建一个名为testwidget.php的View文件。

 
= Progress::widget(['percent' => 60, 'label' => 'Progress 60%']) ?>

步骤3-如果您访问http：// localhost：8080 / index.php？r = site / test-widget，则将看到进度条小部件。

使用小部件

要在视图中使用小部件，应调用yii \ base \ Widget :: widget（）函数。此函数采用用于初始化小部件的配置数组。在上一个示例中，我们插入了带有百分比和带标签的配置对象参数的进度条。

一些小部件带有一部分内容。它应该放在yii \ base \ Widget :: begin（）和yii \ base \ Widget :: end（）函数之间。例如，以下小部件显示联系表格-

 'contact-form']); ?> 
   = $form->field($model, 'name') ?> 
   = $form->field($model, 'email') ?> 
   = $form->field($model, 'subject') ?> 
   = $form->field($model, 'body')->textArea(['rows' => 6]) ?> 
   = $form->field($model, 'verifyCode')->widget(Captcha::className(), [ 
      'template' =>
         '

            
{image}
            
{input}
         
', 
   ]) ?> 
   
 
      = Html::submitButton('Submit', ['class' => 'btn btn-primary',
         'name' => 'contact-button']) ?> 
   
 
 

创建小部件

要创建小部件，您应该从yii \ base \ Widget扩展。然后，您应该覆盖yii \ base \ Widget :: init（）和yii \ base \ Widget :: run（）函数。 run（）函数应返回渲染结果。 init（）函数应规范窗口小部件属性。

步骤1-在项目根目录中创建一个components文件夹。在该文件夹中，使用以下代码创建一个名为FirstWidget.php的文件。

mes === null) { 
            $this->mes = 'First Widget'; 
         } 
      }  
      public function run() { 
         return "
$this->mes
"; 
      } 
   } 
?>

步骤2-以以下方式修改testwidget视图。

 
= FirstWidget∷widget() ?>

步骤3-转到http：// localhost：8080 / index.php？r = site / test-widget 。您将看到以下内容。

步骤4-要在begin（）和end（）调用之间包含内容，您应该修改FirstWidget.php文件。

$content";
      }
   }
?> 

步骤5-现在，h1标签将包围所有内容。注意，我们使用ob_start（）函数来缓冲输出。修改以下代码中给出的testwidget视图。

   First Widget in H1

您将看到以下输出-

重要事项

小部件应-

• 按照MVC模式创建。您应该在小部件类的视图和逻辑中保留表示层。

• 设计成独立的。最终开发人员应该能够将其设计为View。