README

由 Digital Deals s.r.o. 分支

Yii2Metronic 是基于响应式和多功能的 Metronic（v2.0）管理主题的 Yii2 组件（小部件）集合。由 Twitter Bootstrap 3.1.0 框架驱动。

Metronic 可用于任何类型的 Web 应用程序：自定义管理面板、管理仪表板、CMS、CRM、SAAS 和网站：商业、企业、投资组合、博客。Metronic 具有简洁、清晰和直观的都市风格设计，使您的下一个项目看起来很棒，同时用户友好。Metronic 拥有大量的插件和 UI 组件，并在所有主要 Web 浏览器、平板电脑和手机上无缝运行。

超过 30 个适用于 Yii2 Metronic 的小部件。

基本配置

    'components' => [ 
        'metronic' => [
            'class' => 'hustshenl\metronic\Metronic',
            'color' => 'default',
            'layoutOption' => \hustshenl\metronic\Metronic::LAYOUT_FLUID,
            'headerOption' => 'fixed',
        ],
    ],
    'preload' => ['metronic'],

一些示例

菜单

Metronic 菜单使用嵌套 HTML 列表显示多级菜单。

菜单的主要属性是 [[items]]，它指定了菜单中可能的项目。菜单项可以包含子项，这些子项指定了该菜单项下的子菜单。菜单检查当前路由和请求参数以切换某些菜单项的激活状态。请注意，菜单仅渲染关于菜单的 HTML 标签。它不会进行任何样式化。您负责提供 CSS 样式以使其看起来像真正的菜单。

以下示例展示了如何使用菜单

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...',
        ]
    ],
]
]);

水平菜单

水平菜单使用嵌套 HTML 列表显示多级菜单。

菜单的主要属性是 [[items]]，它指定了菜单中可能的项目。菜单项可以包含子项，这些子项指定了该菜单项下的子菜单。菜单检查当前路由和请求参数以切换某些菜单项的激活状态。请注意，菜单仅渲染关于菜单的 HTML 标签。它不会进行任何样式化。您负责提供 CSS 样式以使其看起来像真正的菜单。支持多种操作模式：经典、巨幕和全巨幕（见 [[HorizontalMenu::type]]）。

以下示例展示了如何使用菜单

// 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...',
        ]
    ],
]);

// 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],
    ],
]);

Nav

Nav 渲染 nav HTML 组件。例如

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' => '#'],
            ],
        ],
    ],
]);

注意： Bootstrap 3 不支持 Level 1 以上的多级下拉菜单。

DateRangePicker

DateRangePicker 渲染日期范围选择器小部件。

小部件有两种操作模式：“输入”和“高级”。模式“输入”渲染输入 HTML 元素，模式“高级”渲染 span HTML 元素。小部件渲染一个隐藏字段，其中包含与该小部件关联的模型名称和所选日期的当前值。

例如，如果 [[model]] 和 [[attribute]] 未设置

 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',
]);

Portlet

Portlet 渲染 metronic 立面。任何在 [[begin()]] 和 [[end()]] 调用之间包含的内容都被视为立面的内容。例如

// Simple portlet
Portlet::begin([
  'icon' => 'fa fa-bell-o',
  'title' => 'Title Portlet',
]);
echo 'Body portlet';
Portlet::end();

// 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,
  ],
]);

Select2

Select2 渲染 Select2 组件。例如

echo Select2::widget([
    'name' => 'select',
    'data' => ['1' => 'Item 1', '2' => 'Item 2'],
    'multiple' => true,
]);

徽章

徽章小部件。例如

  Badge::widget([
      'label' => 'NEW',
      'type' => Badge::TYPE_SUCCESS,
      'round'
  ]);

IonRangeSlider

IonRangeSlider 渲染 ionRangeSlider 小部件。例如，如果 [[model]] 和 [[attribute]] 未设置

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
    ],
]);

Spinner

Spinner 渲染 spinner Fuel UX 小部件。例如

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);}'],
]);

以下示例将使用名称属性

echo Spinner::widget([
    'name'  => 'country',
    'clientOptions' => ['step' => 2],
]);

手风琴

手风琴渲染 accordion Metronic 组件。例如

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],
]);

注意

注意渲染 metronic 按钮。例如

Note::widget([
    'title' => 'Success! Some Header Goes Here',
    'body' => 'Duis mollis, est non commodo luctus',
    'type' => Note::TYPE_INFO,
]);

以下示例将在警报框内显示 [[begin()]] 和 [[end()]] 调用之间包含的内容

Note::begin(['type' => Note::TYPE_DANGER]);
echo 'Some title and body';
Note::end();

有关更多详细信息，请参阅代码文档...