yii-utils/hwg-nav

Widget navigation Bar/Menu dùng cho Yii hỗ cho việc thiết kế giao diện

Maintainers

Details

github.com/PhiHung908/hwg-nav

Homepage

Source

Issues

Installs: 4

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 0

Open Issues: 0

Language:JavaScript

Type:yii2-extension

dev-master 2024-05-26 03:27 UTC

Requires

  • php: >=8.2

MIT 9813f938dd3e6f6e66da545d78623c35584a7407

  • Phi Hùng <vmkeyb908.woop@gmail.com>

yiiyii-navbaryii-navyii-navmenuyii-utilsyii-hwg

This package is auto-updated.

Last update: 2025-03-29 00:54:54 UTC

README

Tác giả: Phi Hùng - vmkeyb908@gmail.com - (VN) 0974 471 724

  • Widget NavMenu và NavBar được sử dụng với dữ liệu được lấy từ DB
  • Sử dụng đơn giản - chỉ cần đặt đoạn mã ở nơi muốn hiển thị Menu/Bar
  • Khi đặt đoạn mã, sẽ có nhiều tùy chọn nhằm phù hợp với yêu cầu của bạn.

Chú thích: Widget sử dụng jquery-widget, html-bootstrap5, bootstrap-icon (ex: <i class="bi bi-globe"></i>)

Mọi thắc mắc, bạn có thể trao đổi qua email hoặc liên hệ ĐT để được tư vấn.

docs/image-view.PNG

Cài đặt:

composer require yii-utils/hwg-nav "dev-master"

A- Cấu hình main.php:

1-
'aliases' => [
              //...
              '@Hwg' => '@vendor/Yii-Utils/hwg-nav', // or your/path/extracted/to
              //...
2-
'module' => [
             //...
             'hwg' => [
                        'class' => Hwg\Module::class,
            	      ],
              //...

B- layout/main.php (template):


<!-- ... thay thế navbar trong thẻ header: -->

<header>
    <?php 
		echo Hwg\hwgNav::widget(['id' => 'b_' . preg_replace('/[^a-z]+/','',Yii::$app->homeUrl),
					'brandLabel' => Yii::$app->name,
					'brandUrl' => Yii::$app->homeUrl,
					'classFixed' => 'fixed-top',
					'branchName' => 'NavBar',
					'keyChild' => 'items',
					'map' => ['name' => 'label', 'route' => 'url'],
					'keyEncode' => null,
					'clientOptions' => ['flatMenu' => true ],
				]);
    ?>
</header>


<!-- thay đổi thẻ main ( thêm menu ở thẻ div.col-10.col-sm-3 )  -->

<main role="main" class="flex-shrink-0">
	<div class="row gx-0">
		<div class="col-10 col-sm-3 d-none" style="width:20%">
			<?php
				echo Hwg\hwgNav::widget(['id' => 'm_' . preg_replace('/[^a-z]+/','',Yii::$app->homeUrl),
						'brandLabel' => Yii::$app->name,
						'brandUrl' => Yii::$app->homeUrl,
						//'brandOptions' => ['class' => 'text-bg-light'],
						'classFixed' => '',
						'treeTable' => 'menu', //default:'menu'
						'navType' => 'menu',
						'menuAutoToggle' => false, //default:false
						'menuAlwayIconMin' => false, //default:false (use for mobile)
						'menuInitMin' => true, //default:true
						//'navOptions' => ['class' => 'text-bg-light'],
						'branchName' => 'NavMenu',
						'keyChild' => 'items',
						'map' => ['name' => 'label', 'route' => 'url'],
						'keyEncode' => null,
						'clientOptions' => ['xxx' => 1, 'yyy' => 2]
					]);
			?>
		</div>
		<div class="col">
			<div class="container">
				<?= Breadcrumbs::widget([
					'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
				]) ?>
				<?= Alert::widget() ?>
				<?= $content ?>
			</div>
		</div>
	</div>
</main>

<!-- ... -->

C- Mẫu cho bar và menu (không là Main-Nav, các tham số tương tự trên, khác duy nhất là khai báo thêm isMainNav => false):


<!-- navBar ở vị trí bất kỳ -->
<div class="row"><div class="col">
	<?php
		echo Hwg\hwgNav::widget(['id' => 'b2_' . preg_replace('/[^a-z]+/','',Yii::$app->homeUrl),
					'brandLabel' => Yii::$app->name,
					'brandUrl' => Yii::$app->homeUrl,
					'classFixed' => '',
					'branchName' => '',
					'treeTable' => 'hwg_w_design',
					'isMainNav' => false,
					'keyChild' => 'items',
					'map' => ['name' => 'label', 'route' => 'url'],
					'keyEncode' => null,
					'clientOptions' => ['flatMenu' => true ],
				]);
	?>
</div></div>


<!-- navMenu | content(site-index) ở vị trí tiếp theo của navBar trên -->

<style>
.container {
	--bs-gutter-x:0;
	--bs-gutter-y:0;
}
@media (min-width: 1200px) { 
  .container {
    max-width: 100%;
	padding: 0;
	margin-top: -.5em;
  }
}
</style

<div class="row"><div class="col">
	<?php if (1==1)
		echo Hwg\hwgNav::widget(['id' => 'b2_' . preg_replace('/[^a-z]+/','',Yii::$app->homeUrl),
					'brandLabel' => '',
					'brandUrl' => Yii::$app->homeUrl,
					'classFixed' => '',
					'brandOptions' => ['class' => 'text-bg-secondary'],
					'branchName' => 'w-design-bar',
					'treeTable' => 'hwg_w_design',
					'isMainNav' => false,
					'keyChild' => 'items',
					'map' => ['name' => 'label', 'route' => 'url'],
					'keyEncode' => null,
					//'clientEvent' => ['resetsize' => 'function(e, d){console.log(e, d); alert(1);}'],
					'clientOptions' => ['flatMenu' => true ],
				]);
	?>
</div></div>

<div class="row gx-0">
	<div class="col-10 col-sm-3" style="width:18%">
	  <?php if (1==1)
		echo Hwg\hwgNav::widget(['id' => 'm2_' . preg_replace('/[^a-z]+/','',Yii::$app->homeUrl),
						'brandLabel' => 'Comp. tree',
						'brandUrl' => Yii::$app->homeUrl,
						'brandOptions' => ['class' => 'text-bg-secondary'],
						'classFixed' => '',
						'treeTable' => 'hwg_w_design', //default:'menu'
						'navType' => 'menu',
						//'navOptions' => ['class' => 'navbar-nav me-auto mb-2 mb-md-0'],
						'menuAutoToggle' => false, //default:false
						'menuAlwayIconMin' => false, //default:false (use for mobile)
						'menuInitMin' => false, //default:true
						'isMainNav' => false, //default: true for main navBar and main navMenu
						'isRightMenu' => false,
						'noGToggle' => true,
						'branchName' => 'w-design',
						'keyChild' => 'items',
						'map' => ['name' => 'label', 'route' => 'url'],
						'keyEncode' => null,
						'clientOptions' => ['xxx' => 1, 'yyy' => 2]
					]);
	  ?>
	</div>
	
	<div class="col">
		<div class="site-index">
			<div class="row">
				<div class="jumbotron text-center bg-transparent">
					<h1 class="display-4">Congratulations!</h1>

					<p class="lead">You have successfully created your Yii-powered application.</p>

					<p><a class="btn btn-lg btn-success" href="https://www.yiiframework.com">Get started with Yii</a></p>
				</div>

				<div class="body-content">
					<div class="row">
					*********************
					
					site body...
					
					*********************
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="col-10 col-sm-3" style="width:18%">
	  <?php if (1==1)
		echo Hwg\hwgNav::widget(['id' => 'm2b_' . preg_replace('/[^a-z]+/','',Yii::$app->homeUrl),
						'brandLabel' => 'Properties',
						'brandUrl' => Yii::$app->homeUrl,
						'brandOptions' => ['class' => 'text-bg-secondary'],
						'classFixed' => '',
						'treeTable' => 'hwg_w_design', //default:'menu'
						'navType' => 'menu',
						//'navOptions' => ['class' => 'navbar-nav me-auto mb-2 mb-md-0'],
						'menuAutoToggle' => false, //default:false
						'menuAlwayIconMin' => false, //default:false (use for mobile)
						'menuInitMin' => false, //default:true
						'isMainNav' => false, //default: true for main navBar and main navMenu
						'isRightMenu' => true,
						'noGToggle' => true,
						'branchName' => 'w-design-comp',
						'keyChild' => 'items',
						'map' => ['name' => 'label', 'route' => 'url'],
						'keyEncode' => null,
						'clientOptions' => ['xxx' => 1, 'yyy' => 2]
					]);
	  ?>
	</div>
</div>

D- Thêm cột trong table menu: mysql full table:

/*
SQLyog v13.1.9 (64 bit)
MySQL - 8.3.0 : Database - yii2advanced
*********************************************************************
*/

/*!40101 SET NAMES utf8 */;

/*!40101 SET SQL_MODE=''*/;

/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;
CREATE DATABASE /*!32312 IF NOT EXISTS*/`yii2advanced` /*!40100 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci */ /*!80016 DEFAULT ENCRYPTION='N' */;

USE `yii2advanced`;

/*Table structure for table `menu` */

DROP TABLE IF EXISTS `menu`;

CREATE TABLE `menu` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(128) NOT NULL,
  `parent` int DEFAULT NULL,
  `route` varchar(255) DEFAULT NULL,
  `order` int DEFAULT NULL,
  `data` blob,
  `branch_name` varchar(255) DEFAULT NULL,
  `itype` varchar(30) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL,
  `iposition` varchar(30) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci DEFAULT NULL,
  `serverside` blob,
  `icon` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`),
  KEY `parent` (`parent`),
  CONSTRAINT `menu_ibfk_1` FOREIGN KEY (`parent`) REFERENCES `menu` (`id`) ON DELETE SET NULL ON UPDATE CASCADE
) ENGINE=InnoDB AUTO_INCREMENT=55 DEFAULT CHARSET=utf8mb3;

/*Data for the table `menu` */

insert  into `menu`(`id`,`name`,`parent`,`route`,`order`,`data`,`branch_name`,`itype`,`iposition`,`serverside`,`icon`) values 
(1,'Menu 1',NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(2,'M1.1',1,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(3,'M1.2',1,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(4,'M1.2.1',3,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(5,'M1.2.2',3,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(6,'Menu 2',NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(7,'M2.1',6,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(8,'Menu 3',NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(9,'M1.2.1.1',4,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(10,'Home',NULL,'/site/index',NULL,NULL,'NavBar',NULL,NULL,NULL,'bi bi-house'),
(11,'Welcome',NULL,NULL,900,'if (isSet(Yii::$app->user->identity->imgUrl)) {\r\n  echo \'<img src=\"\">\';\r\n} else {\r\n  echo \'<i class=\"bi bi-person-circle pe-2\" XXtitle=\"\' . $v[\'label\'] . \'\"></i>\';\r\n}\r\necho    \'<span class=\"a-label XXd-none XXd-sm-inline-block\">\' . Yii::$app->user->identity->username . \'</span>\';\r\n','NavBar','eval','end','!Yii::$app->user->isGuest','bi bi-globe'),
(12,'Search',NULL,NULL,800,'navLogin.php','NavBar','view','end',NULL,NULL),
(14,'Logout',11,NULL,120,'echo Html::beginForm([\'/site/logout\'], \'post\', [\'class\' => \'d-flex\'])\r\n	    . \'<div class=\"ms-3xx\"><i class=\"bi bi-box-arrow-left\"></i>\'\r\n            . Html::submitButton(\r\n                \'Logout\',\r\n                [\'class\' => \'btn btn-link logout text-decoration-none pt-0\']\r\n            ).\'</div\'\r\n            . Html::endForm();','NavBar','eval',NULL,'!Yii::$app->user->isGuest',NULL),
(15,'Options',11,NULL,940,NULL,'NavBar',NULL,NULL,NULL,'bi bi-cog'),
(16,'-',11,NULL,930,NULL,'NavBar',NULL,NULL,NULL,NULL),
(17,'Login',NULL,'/site/login',910,'        echo Html::tag(\'div\',Html::a(\'Login\',[\'/site/login\'],[\'class\' => [\'btn btn-link login text-decoration-none\']]),[\'class\' => [\'d-flex\']]);\r\n','NavBar','eval--','end','Yii::$app->user->isGuest','bi bi-sign-in'),
(18,'Opt.1',15,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(19,'Opt.2',15,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(20,'Opt.1.1',18,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(21,'Opt.1.2',18,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(22,'Opt.1.2.1',21,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(23,'Opt2.1',19,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL),
(24,'About',NULL,'/site/about',NULL,NULL,'NavBar',NULL,NULL,NULL,NULL),
(25,'Contact',NULL,'/site/contact',NULL,NULL,'NavBar',NULL,NULL,NULL,NULL),
(26,'Signup',NULL,'/site/signup',NULL,NULL,'NavBar',NULL,NULL,'Yii::$app->user->isGuest;\r\n',NULL),
(27,'Menu 1',NULL,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,'bi bi-cup-hot'),
(28,'Menu 2',NULL,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,'bi bi-camera-reels'),
(29,'Menu 3',NULL,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,'bi bi-film'),
(30,'Menu 4',NULL,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,'bi bi-gear'),
(31,'M3.1',29,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,'bi bi-rss'),
(32,'M3.2',29,NULL,NULL,'aaaaa','NavMenu',NULL,NULL,NULL,NULL),
(33,'M3.3',29,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(34,'M3.2.1',32,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(35,'M3.2.2',32,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(36,'M3.2.3',32,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(37,'M3.2.3.1',36,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(38,'M4.1',30,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(39,'M4.2',30,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(40,'Test Bar',NULL,NULL,NULL,NULL,'NavBar',NULL,NULL,NULL,NULL),
(41,'Test Bar .1',40,NULL,NULL,NULL,'NavBar',NULL,NULL,NULL,NULL),
(42,'Menu 555',NULL,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,'bi bi-globe'),
(43,'Menu 555.1',42,NULL,NULL,NULL,'NavMenu',NULL,NULL,NULL,NULL),
(44,'Menu 555.2',42,NULL,NULL,NULL,NULL,NULL,NULL,NULL,NULL);

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

Xem Video Demo để thấy được cách hoạt động của nó.