diff --git a/docs/guide/README.md b/docs/guide/README.md index 39434d1b74..cf8e561f61 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -193,8 +193,8 @@ Widgets * Menu: link to demo page * LinkPager: link to demo page * LinkSorter: link to demo page -* [Bootstrap Widgets](bootstrap-widgets.md) -* [Jquery UI Widgets](jui-widgets.md) +* [Bootstrap Widgets](widget-bootstrap.md) +* [Jquery UI Widgets](widget-jui.md) Helpers diff --git a/docs/guide/structure-widgets.md b/docs/guide/structure-widgets.md index 371a6677e3..87738593de 100644 --- a/docs/guide/structure-widgets.md +++ b/docs/guide/structure-widgets.md @@ -1,37 +1,192 @@ Widgets ======= -> Note: This section is under development. - -Widgets are self-contained building blocks for your views, a way to combine complex logic, display, and functionality into a single component. A widget: - -* May contain advanced PHP programming -* Is typically configurable -* Is often provided data to be displayed -* Returns HTML to be shown within the context of the view - -There are a good number of widgets bundled with Yii, such as [active form](form.md), -breadcrumbs, menu, and [wrappers around bootstrap component framework](bootstrap-widgets.md). Additionally there are -extensions that provide more widgets, such as the official widget for [jQueryUI](http://www.jqueryui.com) components. - -In order to use a widget, your view file would do the following: +Widgets are reusable building blocks used in [views](structure-views.md) to create complex and configurable user +interface elements in an object-oriented fashion. For example, a date picker widget may generate a fancy date picker +that allows users to pick a date as their input. All you need to do is just to insert the code in a view +like the following: ```php -// Note that you have to "echo" the result to display it -echo \yii\widgets\Menu::widget(['items' => $items]); - -// Passing an array to initialize the object properties -$form = \yii\widgets\ActiveForm::begin([ - 'options' => ['class' => 'form-horizontal'], - 'fieldConfig' => ['inputOptions' => ['class' => 'input-xlarge']], -]); -... form inputs here ... -\yii\widgets\ActiveForm::end(); + += DatePicker::widget(['name' => 'date']) ?> ``` -In the first example in the code above, the [[yii\base\Widget::widget()|widget()]] method is used to invoke a widget -that just outputs content. In the second example, [[yii\base\Widget::begin()|begin()]] and [[yii\base\Widget::end()|end()]] -are used for a -widget that wraps content between method calls with its own output. In case of the form this output is the `