I'm trying to bring dropdown in my header. Dropdown label coming. But, dropdwon values not coming. What may be the problem ?
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\bootstrap\Dropdown;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);?>
<?
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown', 'url' => ['#'],
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
]);
NavBar::end();
?>
Here is screenshot.
You all can clearly see. Dropdown coming in header. Right to 'My Company' Text. But, no values are coming. Not clickable.
Any Idea ?
You should simply use another Nav widget instead of Dropdown :
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => [
'class' => 'navbar-nav navbar-left',
],
'items' => [
[
'label' => 'Dropdown',
'url' => '#',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
Please try this code :
echo '<ul id="navbar-id" class="navbar-nav navbar-right nav">';
echo '<li class="dropdown">';
echo 'Label <b class="caret"></b>';
echo Dropdown::widget([
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
]);
echo '</li>';
echo '</ul>';
<?php
/* #var $this \yii\web\View */
/* #var $content string */
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => ['data-method' => 'post'],
],
[
'label' => 'Dropdown',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'<li class="divider"></li>',
['label' => 'Level 1 - Dropdown B', 'url' => '#'],
],
],
[
'label' => 'Login',
'url' => ['site/login'],
'visible' => Yii::$app->user->isGuest
],
],
'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
]);
NavBar::end();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="pull-left">© My Company <?= date('Y') ?></p>
<p class="pull-right"><?= Yii::powered() ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
this is an entire layout code. try this layout for any view it will surely work. first name this file header.php(any name is ok) then select the view file for which u want this layout with dropdown.
small error in your code :
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => 'Danish Enam', 'url' => ['/site/register']],
['label' => 'Dropdown',
'items' => [
['label' => 'DropdownA', 'url' => '/'],
['label' => 'DropdownB', 'url' => '#'],
],
],
],
]);
NavBar::end();
Then the bad new, there is a limitation with bootstrap, you can only have 2 levels for the dropdown not 3.
If you want more information take a look there :
Multilevel Boostrap Menu in Yii 2
Related
I created a navigation menu in yii2 and i have links generated by the following code:
<?= HeaderNavigation::widget([
'options' => ['class' => 'nav nav-tabs border-0 flex-column flex-lg-row'],
'itemOptions' => [
'class' => 'nav-item',
],
'items' => [
[
'label' => Yii::t('lang', 'Browse'),
'url' => ['directory/index'],
'icon' => 'home',
'title' => 'HELLO WORLD'
],
],
]) ?>
but title attribute doesn't work. What i m doing wrong??
OK, finally i managed to make it work with the help of Michal Hynčica.
I had to use options key:
'options' => ['title' => 'HELLO WORLD'],
so the code should be:
'items' => [
[
'options' => ['title' => 'HELLO WORLD'],
'label' => Yii::t('lang', 'Browse'),
'url' => ['directory/index'],
'icon' => 'home',
'title' => 'HELLO WORLD'
],
I have downloaded yii2-widgets-master and don't know where I should keep it.
I am facing the error Class kartik\widgets\SideNav not found.
My code is here
<?php
use yii\helpers\Url;
use kartik\widgets\SideNav;
?>
<div id = "links">
<div class="user-img"><i class="fa fa-user" aria- hidden="true"></i>
<div class="text-center info"> <p>Wecare</p></div>
</div>
<?php
$menuItems[] = ['label' => 'DFenX - Yii2 User - '. Yii::t('app','User Admin Panel'), 'icon' => 'cog', 'url'=>Url::to(['/user/admin/index'])];
$menuItems[] = ['label' => Yii::t('app','Authentication manager'), 'icon' => 'th-list', 'items' => [
['label' => 'Settings', 'icon' => 'th-list', 'items' => [
['label' => '/user/settings', 'url'=>Url::to(['/user/settings'])],
['label' => '/user/settings/profile', 'url'=>Url::to(['/user/settings/profile'])],
['label' => '/user/settings/account', 'url'=>Url::to(['user/settings/account'])],
['label' => '/user/settings/networks', 'url'=>Url::to(['/user/settings/networks'])],
]],
['label' => 'Registration', 'icon' => 'th-list', 'items' => [
['label' => '/user/registration/register', 'url'=>Url::to(['/user/registration/register'])],
['label' => '/user/registration/resend', 'url'=>Url::to(['/user/registration/resend'])],
]],
['label' => 'Security', 'icon' => 'th-list', 'items' => [
['label' => '/user/security/login', 'url'=>Url::to(['/user/security/login'])],
['label' => '/user/security/logout', 'url'=>Url::to(['/user/security/logout'])],
]],
['label' => 'Recovery', 'icon' => 'th-list', 'items' => [
['label' => '/user/recovery/request', 'url'=>Url::to(['/user/recovery/request'])],
['label' => '/user/recovery/reset', 'url'=>Url::to(['/user/recovery/reset'])],
]],
]];
$type = SideNav::TYPE_PRIMARY;
$heading = '<i class="glyphicon glyphicon-user"></i> ' . Yii::t('app','USER Admin - UTILITIES');
echo SideNav::widget([
'type' => $type,
'encodeLabels' => false,
'heading' => $heading,
'items' =>$menuItems,
]);
?>
</div>
Add to composer.json:
"kartik-v/yii2-widget-sidenav": "*"
Run composer update in console under project directory.
I referred this site http://demos.krajee.com/widget-details/sidenav
I have added kartik navigation side bar in main layout as per follows but not showing properly, in the frst image I have shown the output & in the next image my expected output.
<?php
use yii\helpers\Url;
use kartik\sidenav\SideNav;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use common\widgets\Alert;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<?php
$menuItems = [
/*['label' => 'Home', 'url' => ['/site/index']],*/
/*['label' => 'Contact', 'url' => ['/site/contact']],*/
];
if (Yii::$app->user->isGuest) {
//$menuItems[] = ['label' => 'Enquiry', 'url' => ['/site/acenquiry']];
$menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
$menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
//print_r(Yii::$app->user->id);
$menuItems[]=[
'label'=>'Dashboard',
'url'=>['/site/dashboard','date'=>'1','status'=>'0'],
];
$menuItems[]=['label' => 'View',
'items' => [
['label' => 'Companies',
'url' => ['/company']
],
['label' => 'Projects',
'url' => ['/project']
],
['label' => 'Documents',
'url' => ['/quotedocs']
],
['label' => 'Quotations',
'url' => ['/quotations']
],
['label' => 'Payments',
'url' => ['/grptankpayment']
],
],
];
$menuItems[]=['label' => 'Configuration',
'items' => [
['label' => 'Status Types',
'url' => ['/status']
],
['label' => 'Document Types',
'url' => ['/doctype']
],
['label' => 'Task Types',
'url' => ['/tasktype']
],
],
];
$menuItems[]=['label' => 'GRP',
'items' => [
['label' => 'GRP Panels',
'url' => ['/grptankpanels']
],
['label' => 'GRP Tools',
'url' => ['/grptanktools']
],
['label' => 'GRP Main Accessories',
'url' => ['/grptankaccessories']
],
['label' => 'GRP Sub Accessories',
'url' => ['/grptanksubaccessories']
],
],
];
$menuItems[]=[
'label'=>'Company',
'url'=>['/company/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[]=['label' => 'Project',
'items' => [
['label'=>'Create Project',
'url'=>['/project/create'],
],
['label'=>'Project Execution',
'url'=>['/project-execution/create'],
],
],
];
$menuItems[] = [
'label' => 'Quotation',
'url' => ['/quotations/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[]=[
'label'=>'Sekisui',
'url'=>['/grptanksekisui/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'Docs',
'url' => ['/quotedocs/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'Payments',
'url' => ['/grptankpayment/create'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'My Tasks',
'url' => ['/task'],
'linkOptions' => ['data-method' => 'post']
];
$menuItems[] = [
'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']
];
}
/*echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
]);*/
?>
<div class="container">
<?php echo SideNav::widget([
'encodeLabels' => false,
'items' => $menuItems,
'type' => SideNav::TYPE_PRIMARY
]); ?>
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
<footer class="footer">
<div class="container">
<p class="pull-right">© Test Company <?= date('Y') ?></p>
</div>
</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Output image
It should be like this:
It is most likely because you didn't specify bootstrap column widths (col-sm-X). To get pretty similar result, you should add 2 additional parent divs.
Instead of:
<div class="container">
<?php echo SideNav::widget([
'encodeLabels' => false,
'items' => $menuItems,
'type' => SideNav::TYPE_PRIMARY
]); ?>
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
Would be:
<div class="container">
<div class="col-sm-3">
<?php echo SideNav::widget([
'encodeLabels' => false,
'items' => $menuItems,
'type' => SideNav::TYPE_PRIMARY
]); ?>
</div>
<div class="col-sm-9">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
</div>
I used just small but you can add more options here.
i'm working with yii2 and uikit. i'm trying to build a navbar with the menu widget and i have this:
<nav class='uk-navbar'>
<?php
echo Menu::widget([
'activateItems' => true,
'activateParents' => true,
'activeCssClass' => 'uk-active',
'encodeLabels' => false,
'items' => [
['label' => 'Inicio', 'url' => ['site/index']],
['label' => 'Juridico', 'url' => ['juridico/index']],
['label' => 'Pagos', 'url' => ['pagos/index']],
['label' => 'Universidades', 'url' => ['universidades/index']],
['label' => 'Usuarios', 'url' => ['usuarios/index']],
['label' => 'Planes', 'options' => ['class' => 'uk-parent', 'data' => 'uk-dropdown'], 'url' => ['#'], 'items' => [
['label' => 'Planes Juridico', 'url' => ['#']],
['label' => 'Planes Universidades', 'url' => ['#']],
]],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
'submenuTemplate' => '<div class="uk-dropdown uk-dropdown-navbar"><ul class="uk-nav uk-nav-navbar">{items}</ul></div>',
'options' => [ 'class' => 'uk-navbar-nav'],
]);
?>
</nav>
all i'm missing is this attribute but i don't know how to set it 'data-uk-dropdown'
i need this result in order to the dropdown to work:
<nav class="uk-navbar">
<ul class="uk-navbar-nav">
<li class="uk-active">Active</li>
<li>Item</li>
<li class="uk-parent" data-uk-dropdown>
Parent
<div class="uk-dropdown uk-dropdown-navbar">
<ul class="uk-nav uk-nav-navbar">
<li>Item</li>
<li>Another item</li>
<li class="uk-nav-header">Header</li>
<li>Item</li>
<li>Another item</li>
<li class="uk-nav-divider"></li>
<li>Separated item</li>
</ul>
</div>
</li>
</ul>
</nav>
Thanks in advance.
have you try to add in the 'options' like below?
<?php
echo Menu::widget([
'activateItems' => true,
'activateParents' => true,
'activeCssClass' => 'uk-active',
'encodeLabels' => false,
'items' => [
['label' => 'Inicio', 'url' => ['site/index']],
['label' => 'Juridico', 'url' => ['juridico/index']],
['label' => 'Pagos', 'url' => ['pagos/index']],
['label' => 'Universidades', 'url' => ['universidades/index']],
['label' => 'Usuarios', 'url' => ['usuarios/index']],
['label' => 'Planes', 'options' => ['class' => 'uk-parent', 'data' => 'uk-dropdown'], 'url' => ['#'], 'items' => [
['label' => 'Planes Juridico', 'url' => ['#']],
['label' => 'Planes Universidades', 'url' => ['#']],
]],
['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
],
'submenuTemplate' => '<div class="uk-dropdown uk-dropdown-navbar"> <ul class="uk-nav uk-nav-navbar">{items}</ul></div>',
'options' => [
'class' => 'uk-navbar-nav',
'data-uk-dropdown' => ''
],
]);
?>
I think this is how you can add data attributes same method would work in other Yii2 places. So you specify the key 'data' and then add an array of just the attribute names (without prefixing them with 'data'. You can read more about it here.
NavBar::begin([
'options' => [
'id' => 'main-nav-bar',
'class' => 'navbar-inverse',
'data' => ['my-attribute' => 'myValue'] // This line specifically.
],
'innerContainerOptions' => ['class' => 'container-fluid']
]);
I'm trying to put modal in a navbar in my yii2 project. I'm using yii2-bootstrap extension.
Code for my nav:
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
$menuItems = [
['label' => 'Home', 'url' => ['/site/index']],
//['label' => 'facilities', 'url' => ['/facilities/index']],
['label' => 'Hotel',
'items' => [
['label' => 'Facilities', 'url' => ['/facilities/index']],
// '<li class="divider"></li>',
// '<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Cuisines', 'url' => ['/cuisines/index']],
],
]
];
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => 'Login', 'url' => ['/site/login']];
} else {
$menuItems[] = [
'label' => 'Logout (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']
];
}
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
]);
NavBar::end();
?>
code for modal:
<?php
Modal::begin([
'header' => '<h2>Hello world</h2>',
'toggleButton' => ['label' => 'click me'],
]);
echo 'Say hello...';
Modal::end();
?>
can anyone please tell me how to add this modal to navbar?
First place the modal with an id on your site/index
<?php
use yii\bootstrap\Modal;
Modal::begin(['id' => 'modal',
'header' => '<h2>Hello world</h2>']);
echo "Say Hello...";
Modal::end();
?>
Then create a jQuery action in your controller/SiteController
function actionShowmodal(){
$js='$("#modal").modal("show")';
$this->getView()->registerJs($js);
return $this->render('index');
}
Finally in views\layouts\main add the link in your Nav::wigdet
['label' => 'Show Modal', 'url' => ['/site/showmodal']],
$menuItems = [
['label' => 'Home', 'url' => ['/site/index']],
//['label' => 'facilities', 'url' => ['/facilities/index']],
['label' => 'Hotel',
'items' => [
['label' => 'Facilities', 'url' => ['/facilities/index']],
// '<li class="divider"></li>',
// '<li class="dropdown-header">Dropdown Header</li>',
['label' => 'Cuisines', 'url' => ['/cuisines/index']],
// insert this line
'<li><a data-toggle="modal" data-target="#modal" style="cursor: pointer;">Click me gently!</a></li>',
],
]
];
And for the modal widget:
<?php
Modal::begin([
'header' => '<h2>Hello world</h2>',
'toggleButton' => ['label' => 'click me'],
'id' => 'modal', // <-- insert this modal's ID
]);
echo 'Say hello...';
Modal::end();
?>