yii2-theme-layui,based on BrotherMa/layuicms2.0 and yiisoft/yii2-gii
The preferred way to install this extension is through composer.
Either run
php composer.phar require-dev myzero1/yii2-theme-layui: *
or add
"myzero1/yii2-theme-layui": "*"
to the require-dev section of your composer.json
file.
Once the extension is installed, simply modify your application configuration as follows:
return [
......
'components' => [
......
'view' => [
'theme' => [
'pathMap' => [
'@app/views' => '@vendor/myzero1/yii2-theme-layui/src/views', // using the layui theme
],
],
],
'assetManager' => [
'class' => 'yii\web\AssetManager',
'forceCopy' => false,
// 'linkAssets' => true,//link to assets,no cache.used in develop.
'bundles'=> [
'myzero1\layui\assets\php\components\LayoutAsset' => [
// 'copyright' => '<p><span>copyright @2018-2038 myzero1</span></p>', // false
// 'copyright' => false
'noticeUrl' => '/gii',
// 'noticeUrl' => false,
],
],
],
......
],
......
'params' => [
......
'layuiTheme' => [
'navs' => [
"businessManagement" => [
'topMenu' => [
"menu" => "businessManagement",
"title" => "业务管理",
"icon" => "",
"class" => "layui-icon",
],
[
"title" => "业务介绍",
"icon" => "icon-text",
"href" => "/$moduleId/business/introduction",
"spread" => false
],
[
"title" => "CRUD操作",
"icon" => "icon-xiugai",
"href" => "",
"spread" => false,
"children" => [
[
"title" => "操作初始化",
"icon" => "z1iconfont z1icon-init",
"href" => "/$moduleId/user/init",
"spread" => false
],
[
"title" => "列表页面",
"icon" => "",
"href" => "/$moduleId/z1-user/index",
"spread" => false
],
]
],
[
"title" => "使用文档",
"icon" => "",
"href" => "",
"spread" => false,
"children" => [
[
"title" => "字体图标",
"icon" => "icon-mokuai",
"href" => "/$moduleId/doc/icons",
"spread" => false
],
[
"title" => "三级联动",
"icon" => "icon-mokuai",
"href" => "/$moduleId/doc/address",
"spread" => false
],
[
"title" => "bodyTab",
"icon" => "icon-mokuai",
"href" => "/$moduleId/doc/bodytab",
"spread" => false
],
[
"title" => "三级菜单",
"icon" => "icon-mokuai",
"href" => "/$moduleId/doc/nav",
"spread" => false
],
]
],
],
"memberCenter" => [
'topMenu' => [
"menu" => "memberCenter",
"title" => "用户中心",
"icon" => "icon-icon10",
"class" => "seraph icon-icon10",
],
[
"title" => "用户管理",
"icon" => "",
"href" => "/$moduleId/z1-user/index",
"spread" => false
],
[
"title" => "角色管理",
"icon" => "",
"href" => "/$moduleId/user/role",
"spread" => false
]
],
"systemeManagement" => [
'topMenu' => [
"menu" => "systemeManagement",
"title" => "系统管理",
"icon" => "z1iconfont z1icon-set",
"class" => "z1iconfont z1icon-set",
],
[
"title" => "平台公告",
"icon" => "",
"href" => "/$moduleId/site/notice",
"spread" => false
],
[
"title" => "403页面",
"icon" => "",
"href" => "/$moduleId/site/e403",
"spread" => false
],
[
"title" => "404页面",
"icon" => "",
"href" => "/$moduleId/site/e404",
"spread" => false
],
[
"title" => "500页面",
"icon" => "",
"href" => "/$moduleId/site/e500",
"spread" => false
],
[
"title" => "登录页面",
"icon" => "",
"href" => "/$moduleId/site/login",
"spread" => false,
"target" => "_blank",
],
],
],
'rightNavs' => [
[
"title" => "个人资料",
"icon" => "seraph icon-ziliao",
"href" => "/page/user/userInfo.html",
"spread" => false
],
[
"title" => "修改密码",
"icon" => "seraph icon-xiugai",
"href" => "page/user/changePwd.html",
"spread" => false
],
],
'mainUrl' => $this->id . '/site/main',
'noticeUrl' => $this->id . '/site/notice',
'copyright' => '<p><span>copyright @2018-2028 myzero1</span><a href="https://github.com/myzero1/yii2-theme-layui" target="_blank"><img class="layui-nav-img userAvatar" src="LayoutAssetBundleBaseUrl/resources/images/myzero1.jpg" style="margin-left:10px;cursor:pointer;"></a></p>',
'funcSettting' => true,
'skin' => true,
],
......
],
......
];
......
if (YII_ENV_DEV) {
$config['modules']['gii'] = [
'class' => 'yii\gii\Module',
'allowedIPs' => ['127.0.0.1', '::1'],
'generators' => [
'z1layui_crud' => [ // generator name
'class' => 'myzero1\layui\gii\templates\crud\Generator', // generator class
'templates' => [
'default' => '@vendor/myzero1/yii2-theme-layui/src/gii/templates/crud/layui',
]
],
],
];
}
......
in the main.php of module
return [
......
'layout' => 'main',// to set theme by setting layout and layoutPath
'layoutPath' => \Yii::getAlias('@vendor/myzero1/yii2-theme-layui/src/views/layouts'),
......
];
You can then access home page to watch the theme.
http://localhost/path/to/index.php
You can then access gii page to watch the crud.
http://localhost/path/to/index.php?r=gii
OR
http://localhost/path/to/index.php/gii
-
use layui
You show set the layout as layout in site Controller for index page,in
SiteController
as flowlling, in view:public function actionIndex() { $this->layout = 'layout'; return $this->render('index'); }
-
Add plug-ins to requirements
Just add code as flowlling, in view:
<?php \myzero1\layui\assets\php\components\plugins\EchartsAsset::register($this); ?>
Optional plug-in
\myzero1\layui\assets\php\components\plugins\EchartsAsset::register($this); \myzero1\layui\assets\php\components\plugins\SwitchAsset::register($this); \myzero1\layui\assets\php\components\plugins\Wysihtml5Asset::register($this); \myzero1\layui\assets\php\components\plugins\ZtreeAsset::register($this);
-
use echart
Just add code as flowlling, in view:
<?php myzero1\layui\assets\php\components\plugins\EchartsAsset::register($this); ?> <div data-provide="z1echarts" id='client-chart' style="width: 100%;height:250px;" data-echarts-config="{title: {text: '折线图基本',left: 'center'}}"></div>
-
use wysihtml5
Just add code as flowlling, in view:
<?php myzero1\layui\assets\php\components\plugins\Wysihtml5Asset::register($this); ?> <textarea data-provide="z1wysihtml5" data-z1wysihtml5-config="{}" rows="10" cols="80"></textarea>
You can also use the advanced wysiwyg tool, yiidoc/yii2-redactor If you want to upload a file,you can try this widget,kartik-v/yii2-widget-fileinput You can combine yiidoc/yii2-redactor and kartik-v/yii2-widget-fileinput together.
<?php <?php echo $form->field($model, 'photo', [ "template" => sprintf("{label}\n{input}%s\n{hint}\n{error}", \kartik\file\FileInput::widget([ 'name' => 'file', 'pluginOptions' => [ 'layoutTemplates' => 'progress', 'uploadUrl' => Url::to(['/redactor/upload/image']), 'showPreview' => false, 'showUpload' => false, 'initialCaption' => $model->photo, ], 'pluginEvents' => [ 'change' => ' function(event, data, previewId, index) { if($("#z1fileinput-progress").length == 0){ var mystyle = "<div id=z1fileinput-progress><style> \ .kv-upload-progress .progress{height: 100%;margin: 0;position: absolute;z-index: 999;width: 40px;right: 80px;border: 1px solid #00a65a;}\ .kv-upload-progress .progress-bar{height: 100%;line-height: 32px;}\ </style></div>"; $("body").append(mystyle); } $(this).fileinput("upload"); } ', 'fileuploaded' => ' function(event, data, previewId, index) { $(this).parents(".form-group").find("input[type=hidden].form-control").val(data.response.filelink); } ', ], ]) ), ])->hiddenInput()->label('照片'); ?>
-
use ztree
use ztree,in ul. You can set data-provide="z1ztree" to use it and set data-z1ztree-config='{...} to set it,you can set the primary parameter of ztree in data-z1ztree-config. Just add code as flowlling, in view:
<ul id="mytes" data-provide="z1ztree" data-z1ztree-config='{data:[{ id:1, pId:0, name:"l1", open:true},{ id:2, pId:0, name:"l1", open:true},{ id:3, pId:1, name:"l2"}]}' class="ztree"></ul>
use ztree by default,in input.Just add code as flowlling, in view:
<?php echo $form->field($model, 'id')->textInput(['data-provide' =>"z1ztree"])?>
use ztree without parents,in input.Just add code as flowlling, in view:
<?php echo $form->field($model, 'id')->textInput(['data-provide' =>"z1ztree",'data-z1ztree-config' => '{"withParents": false}'])?>
use ztree by checkbox .Just add code as flowlling, in view:
<?php echo $form->field($model, 'id')->textInput(['data-provide' =>"z1ztree",'data-z1ztree-config' => '{"checkType": "checkbox"}'])?>
-
use SwitchAsset
Just add code as flowlling, in view:
<?php myzero1\layui\assets\php\components\plugins\SwitchAsset::register($this); ?> <?= $form->field($model, 'rememberMe', [ 'labelOptions' => [ 'style' => ' padding:0; ', ], 'options' => [ 'style' => ' width:400px; ', ], ])->checkbox([ 'id' => 'mywitch', 'data-handle-width' => '105', 'data-on-color' => 'primary', 'data-on-text' => '要记住密码', 'data-off-color' => 'info', 'data-off-text' => '不记住密码', 'data-label-text' => '要记住密码', 'checked' => $model->rememberMe == '1' ? true : false, ])->label('') ?>