Yii2Metronic
Forked by DigiNova, (*1)
Yii2Metronic is a collection of Yii2 components(widgets) based on responsive and multipurpose admin theme
called Metronic (v2.0). Powered with Twitter Bootstrap 3.1.0 Framework., (*2)
Metronic can be used for any type of web applications: custom admin panels, admin dashboards, CMS, CRM, SAAS and websites: business, corporate, portfolio, blog.
Metronic has a sleek, clean and intuitive metro style design which makes your next project look awesome and yet user
friendly. Metronic has a huge collection of plugins and UI components and works seamlessly on all major web browsers,
tablets and phones., (*3)
More than 30 widgets for Yii2 Metronic., (*4)
Basic configuration:, (*5)
'components' => [
'metronic' => [
'class' => 'diginova\metronic\Metronic',
'color' => 'default',
'layoutOption' => \diginova\metronic\Metronic::LAYOUT_FLUID,
'headerOption' => 'fixed',
],
],
//'preload' => ['metronic'],
Some examples:, (*6)
Metronic menu displays a multi-level menu using nested HTML lists., (*7)
The main property of Menu is [[items]], which specifies the possible items in the menu.
A menu item can contain sub-items which specify the sub-menu under that menu item.
Menu checks the current route and request parameters to toggle certain menu items
with active state.
Note that Menu only renders the HTML tags about the menu. It does do any styling.
You are responsible to provide CSS styles to make it look like a real menu., (*8)
The following example shows how to use Menu:, (*9)
php
echo Menu::widget([
'items' => [
// Important: you need to specify url as 'controller/action',
// not just as 'controller' even if default action is used.
[
'icon' => '',
'label' => 'Home',
'url' => ['site/index']
],
// 'Products' menu item will be selected as long as the route is 'product/index'
['label' => 'Products', 'url' => ['product/index'], 'items' => [
['label' => 'New Arrivals', 'url' => ['product/index', 'tag' => 'new']],
['label' => 'Most Popular', 'url' => ['product/index', 'tag' => 'popular']],
]],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
'search' => [
// required, whether search box is visible. Defaults to 'true'.
'visible' => true,
// optional, the configuration array for [[ActiveForm]].
'form' => [],
// optional, input options with default values
'input' => [
'name' => 'search',
'value' => '',
'options' => [
'placeholder' => 'Search...',
]
],
]
]);, (*10)
Horizontal Menu displays a multi-level menu using nested HTML lists., (*11)
The main property of Menu is [[items]], which specifies the possible items in the menu.
A menu item can contain sub-items which specify the sub-menu under that menu item.
Menu checks the current route and request parameters to toggle certain menu items
with active state.
Note that Menu only renders the HTML tags about the menu. It does do any styling.
You are responsible to provide CSS styles to make it look like a real menu.
Supports multiple operating modes: classic, mega, and full mega(see [[HorizontalMenu::type]])., (*12)
The following example shows how to use Menu:, (*13)
```php
// Classic menu with search box
echo HorizontalMenu::widget([
'items' => [
// Important: you need to specify url as 'controller/action',
// not just as 'controller' even if default action is used.
['label' => 'Home', 'url' => ['site/index']],
// 'Products' menu item will be selected as long as the route is 'product/index'
['label' => 'Products', 'url' => ['product/index'], 'items' => [
['label' => 'New Arrivals', 'url' => ['product/index', 'tag' => 'new']],
['label' => 'Most Popular', 'url' => ['product/index', 'tag' => 'popular']],
]],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
'search' => [
// required, whether search box is visible. Defaults to 'true'.
'visible' => true,
// optional, the configuration array for [[ActiveForm]].
'form' => [],
// optional, input options with default values
'input' => [
'name' => 'search',
'value' => '',
'options' => [
'placeholder' => 'Search...',
]
],
]);, (*14)
// Mega Menu without search box
echo HorizontalMenu::widget([
'items' => [
['label' => 'Home', 'url' => ['site/index']],
[
'label' => 'Mega Menu',
'type' => HorizontalMenu::ITEM_TYPE_FULL_MEGA,
//optional, HTML text for last column
'text' => 'Other HTML text',
'items' => [
[
'label' => 'Column 1', // First column title
'items' => [
['label' => 'Column 1 Item 1'],
['label' => 'Column 1 Item 2'],
]
],
[
'label' => 'Column 2', // Second column title
'items' => [
['label' => 'Column 2 Item 1'],
['label' => 'Column 2 Item 2'],
]
],
]
],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
]);
```, (*15)
Nav
Nav renders a nav HTML component.
For example:, (*16)
php
echo Nav::widget([
'items' => [
[
'icon' => 'fa fa-warning',
'badge' => Badge::widget(['label' => 'New', 'round' => false]),
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => [...],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
'<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
],
]);, (*17)
Note: Multilevel dropdowns beyond Level 1 are not supported in Bootstrap 3., (*18)
DateRangePicker
DateRangePicker renders dateRangePicker widget., (*19)
There are two modes of operation of the widget are 'input' and 'advance'.
Mode 'input' renders input HTML element and mode 'advance' renders span HTML element.
Widget renders a hidden field with the model name that this widget is associated with
and the current value of the selected date., (*20)
For example, if [[model]] and [[attribute]] are not set:
php
DateRangePicker::widget([
'mode' => DateRangePicker::MODE_ADVANCE,
'labelDateFormat' => 'MMMM D, YYYY',
'type' => DateRangePicker::TYPE_BLUE,
'clientOptions' => [
'format' => 'YYYY-MM-DD',
'ranges' => new \yii\web\JsExpression("{
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 Days': [moment().subtract('days', 6), moment()],
'Last 30 Days': [moment().subtract('days', 29), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
}"),
],
'name' => 'date',
'icon' => 'fa fa-calendar',
'value' => '2014-02-15 - 2014-02-18',
]);, (*21)
Portlet
Portlet renders a metronic portlet.
Any content enclosed between the [[begin()]] and [[end()]] calls of Portlet
is treated as the content of the portlet.
For example,, (*22)
```php
// Simple portlet
Portlet::begin([
'icon' => 'fa fa-bell-o',
'title' => 'Title Portlet',
]);
echo 'Body portlet';
Portlet::end();, (*23)
// Portlet with tools, actions, scroller, events and remote content
Portlet::begin([
'title' => 'Extended Portlet',
'scroller' => [
'height' => 150,
'footer' => ['label' => 'Show all', 'url' => '#'],
],
'clientOptions' => [
'loadSuccess' => new \yii\web\JsExpression('function(){ console.log("load success"); }'),
'remote' => '/?r=site/about',
],
'clientEvents' => [
'close.mr.portlet' => 'function(e) { console.log("portlet closed"); e.preventDefault(); }'
],
'tools' => [
Portlet::TOOL_RELOAD,
Portlet::TOOL_MINIMIZE,
Portlet::TOOL_CLOSE,
],
]);
```, (*24)
Select2
Select2 renders Select2 component.
For example:
php
echo Select2::widget([
'name' => 'select',
'data' => ['1' => 'Item 1', '2' => 'Item 2'],
'multiple' => true,
]);, (*25)
Badge
Badge widget. For example,
Badge::widget([
'label' => 'NEW',
'type' => Badge::TYPE_SUCCESS,
'round'
]);, (*26)
IonRangeSlider
IonRangeSlider renders ionRangeSlider widget.
For example, if [[model]] and [[attribute]] are not set:
php
echo IonRangeSlider::widget([
'name' => 'ionRangeSlider',
'clientOptions' => [
'min' => 0,
'max' => 5000,
'from' => 1000, // default value
'to' => 4000, // default value
'type' => 'double',
'step' => 1,
'prefix' => "$",
'prettify' => false,
'hasGrid' => true
],
]);, (*27)
Spinner
Spinner renders an spinner Fuel UX widget.
For example:, (*28)
php
echo Spinner::widget([
'model' => $model,
'attribute' => 'country',
'size' => Spinner::SIZE_SMALL,
'buttonsLocation' => Spinner::BUTTONS_LOCATION_VERTICAL,
'clientOptions' => ['step' => 2],
'clientEvents' => ['changed' => 'function(event, value){ console.log(value);}'],
]);, (*29)
The following example will use the name property instead:, (*30)
php
echo Spinner::widget([
'name' => 'country',
'clientOptions' => ['step' => 2],
]);, (*31)
Accordion
Accordion renders an accordion Metronic component.
For example:, (*32)
php
echo Accordion::widget([
'items' => [
[
'header' => 'Item 1',
'content' => 'Content 1...',
// open its content by default
'contentOptions' => ['class' => 'in'],
'type' => Accordion::ITEM_TYPE_SUCCESS,
],
[
'header' => 'Item 2',
'content' => 'Content 2...',
],
],
'itemConfig' => ['showIcon' => true],
]);, (*33)
Note
Note renders a metronic button.
For example,
php
Note::widget([
'title' => 'Success! Some Header Goes Here',
'body' => 'Duis mollis, est non commodo luctus',
'type' => Note::TYPE_INFO,
]);, (*34)
The following example will show the content enclosed between the [[begin()]]
and [[end()]] calls within the alert box:
php
Note::begin(['type' => Note::TYPE_DANGER]);
echo 'Some title and body';
Note::end();, (*35)
For more details see code documentation ...
Wallogit.com
