Font Awesome use inside the Yii2 SideNavbar - yii2

I have followed the guidelines given by GitHub Yii2 fontawesome and successfully installed via composer. My problem is the code they given to get the specific icon to my SideNavbar is not working for me.
I have used FA::icon('home') inside my SideNav menu but this code out put only "> this. not the home icon.
code which i was used in my sidenav menu.
<?= SideNav::widget([
'type' => SideNav::TYPE_DEFAULT,
'heading' => 'System Functions',
'items' => [
[
'url' => '../dashboard/manager',
'label' => Yii::t('app','Dashboard'),
'icon' => 'home',
'active' => ($currentpage == 'Manager')
],
[
'url' => '#',
'label' => 'Purchase',
'icon' => FA::icon('home'),
'items' => [
[
'url' => '../dashboard/suppliers',
'label' => Yii::t('app','Suppliers'),
'icon'=>'transport',
'active' => ($currentpage == 'Suppliers')
],
[
'url' => '../dashboard/leaf-entry',
'label' => 'Leaf Collection',
'icon'=>'leaf',
'active' => ($currentpage == 'Leaf')
],
[
'url' => '../dashboard/payments',
'label' => 'Payments',
'icon'=>'phone',
'active'=> ($currentpage == 'Payments')
],
['label' => 'Reports', 'icon'=>'phone', 'url'=>'#']
],
],
[
'label' => 'Stock',
'icon' => 'question-sign',
'items' => [
['label' => 'Live Stock', 'icon'=>'info-sign', 'url'=>'#'],
['label' => 'Auction Despatch', 'icon'=>'phone', 'url'=>'#'],
['label' => 'Production Tracker', 'icon'=>'phone', 'url'=>'#'],
['label' => 'Reports', 'icon'=>'phone', 'url'=>'#']
],
],
[
'label' => 'Human Resource',
'icon' => 'question-sign',
'items' => [
['label' => 'Employees', 'icon'=>'info-sign', 'url'=>'#'],
['label' => 'Time Tracker', 'icon'=>'phone', 'url'=>'#'],
['label' => 'Payments', 'icon'=>'phone', 'url'=>'#'],
['label' => 'Reports', 'icon'=>'phone', 'url'=>'#']
],
],
[
'label' => 'End of day calculations',
'icon' => 'question-sign',
'items' => [
['label' => 'Water Basis', 'icon'=>'info-sign', 'url'=>'#'],
['label' => 'Dry Basis', 'icon'=>'phone', 'url'=>'#'],
['label' => 'Out Turn', 'icon'=>'phone', 'url'=>'#'],
['label' => 'Refuced Tea', 'icon'=>'phone', 'url'=>'#']
],
],
],
]);
?>
Output
And I also have used the Chrome DevTools to inspect the element, which gives me the below result. Hope this would be the problem.

You are using SideNav::widget, which uses the default icon prefix as "glyphicon glyphicon-". This is a SideNav property. If you are creating a SideNav using a glyphicon icon, then it will only use glyphicon icons. If you want to use Font Awesome icons, you need to change the icon prefix like this:
echo SideNav::widget([
'type' => SideNav::TYPE_DEFAULT,
'heading' => 'System Functions',
'iconPrefix' => ' ',
'items' => [
[
'url' => '#',
'label' => 'Home',
'icon' => 'fa fa-home',
]
]
]);
You can use only one type of icons at a time.

Related

Yii2 gridview buttons problem (possibly after pjax)

<?= GridView::widget([
'id' => 'CompanyGrid',
'dataProvider' => $dataProvider,
'filterModel' => $searchModel,
'floatHeader'=>true,
'floatOverflowContainer'=>true,
'floatHeaderOptions'=>['top'=>'0'],
'pjax'=>true,
'pjaxSettings' => [
'options' => [
'enablePushState' => false,
'enableReplaceState' => true,
]
],
'hover'=>true,
'toolbar' => [
'{export}',
'{toggleData}'
],
'panel' => [
'heading'=>'<h3 class="panel-title"><i class="glyphicon glyphicon-globe"></i> Companies</h3>',
'type'=>'secondary',
'before'=>Html::button('Create Company', ['value'=>Url::to('index.php?r=Company/company/create'), 'title' => 'Create Company', 'class' => 'btn btn-success', 'id' => 'modalButton']),
'after'=>false,
],
'columns' => [
['class' => 'kartik\grid\SerialColumn'],
'CompanyID',
'CompanyName',
['class' => 'kartik\grid\ActionColumn',
'template' => '{view} {update} {delete}',
'buttons' => [
'view' => function($url, $model){
return Html::a('<span class="fa fa-eye"></span>', ['view', 'id' => $model->CompanyID], [
'class' => 'activity-view-link',
'data-pjax'=>'w0',
'title' => Yii::t('yii', 'View Company: '.$model->CompanyID),
'data-toggle' => 'modal',
'data-target' => '#modal',
]);
},
'update' => function($url, $model){
return Html::a('<span class="fa fa-edit"></span>', ['update', 'id' => $model->CompanyID], [
'class' => 'activity-view-link',
'title' => Yii::t('yii', 'Edit Company: '.$model->CompanyID),
'data-toggle' => 'modal',
'data-target' => '#modal',
]);
},
'delete' => function($url, $model){
return Html::a('<span class="fa fa-trash"></span>', ['delete', 'id' => $model->CompanyID], [
'class' => '',
'data' => [
'confirm' => 'Are you absolutely sure? This action is not reversible',
'method' => 'post',
],
]);
}
],
],
],
]); ?>
In Controller
public function actionView($id)
{
$model = Company::findOne($id);
return $this->renderAjax('view', [
'model' => $model,
]);
}
I am new in yii2-advance-apps and i am trying to solve this problem. Already worked on this problem and cannot find any solution for this.
The problem is when I click on the gridview actions buttons, it works. However, after PJax, the button just don't work anymore.
However, if i reload the page, the button works again.
How to solve this problem. Thank you in advance.
'data-pjax' => 0, in action buttons options and not 'w0'

Add Custom Button in Kartik Yii2 Kartik DetailView

I already search and try every forum and example.
I am using the Kartik\DetailViwew in Yii2 and I can´t manage to put a single custom button in the buttons1 option.
The code I am working on:
echo DetailView::widget([
'model' => $model,
'attributes' => $attributes,
'mode'=>Yii::$app->request->get('edit')=='t' ? DetailView::MODE_EDIT : DetailView::MODE_VIEW,
'panel'=>[
'heading'=>$this->title,
'type'=>DetailView::TYPE_INFO,
],
'buttons1' => '{update}',
'bordered' => 'true',
'striped' => $striped,
'condensed' => $condensed,
'responsive' => $responsive,
'hover' => $hover,
'hAlign'=>$hAlign,
'vAlign'=>$vAlign,
'fadeDelay'=>$fadeDelay,
'deleteOptions'=>[ // your ajax delete parameters
'params' => ['id' => $model->p_id, 'custom_param' => true],
'url'=>['delete', 'id' => $model->p_id],
]
]);
In the
'buttons1' => '{update}',
According to the example http://demos.krajee.com/detail-view, there is a way to customize.
But there is no example. And the documentation not explain how to do this.
Can anyone help?
After research and some tryings, I did it by this way, you have to enable the edit mode (to show buttons), and modify the defatul template ({buttons}{title}), as this template is replaced if the template exists in vender grideview constants, just inject your code to add any button u want. Is not the rigth solution, but is a workaround that works well
<?php
$button1 = Html::a('<i class="glyphicon glyphicon-trash"></i>', Url::to(['delete', 'id' => $model->id]), [
'title' => 'Eliminar',
'class' => 'pull-right detail-button',
'data' => [
'confirm' => '¿Realmente deseas eliminar este elemento?',
'method' => 'post',
]
]);
$button2 = Html::a('<i class="glyphicon glyphicon-pencil"></i>', Url::to(['actualizar', 'id' => $model->id]), [
'title' => 'Actualizar',
'class' => 'pull-right detail-button',
]);
?>
<?=
DetailView::widget([
'model' => $model,
'hover' => true,
'hideAlerts' => true,
'enableEditMode' => true,
'mode' => DetailView::MODE_VIEW,
'hAlign' => 'left',
'panel' => [
'heading' => '&nbsp',
'type' => DetailView::TYPE_DEFAULT,
'headingOptions' => [
'template' => "$button1 $button2 {title}"
]
],
'attributes' => [
'id',
'identificacion',
'nombre',
],
])
?>
Try it like this:
'buttons1' => Html::a('<i class="glyphicon glyphicon-trash"></i>', Url::to(['delete', 'id' => $model->id]), [
'title' => 'Eliminar',
'class' => 'pull-right detail-button',
'data' => [
'confirm' => '¿Realmente deseas eliminar este elemento?',
'method' => 'post',
]
]),
If you have more than one button, try it like this:
$button1 = Html::a('<i class="glyphicon glyphicon-trash"></i>', Url::to(['delete', 'id' => $model->id]), [
'title' => 'Eliminar',
'class' => 'pull-right detail-button',
'data' => [
'confirm' => '¿Realmente deseas eliminar este elemento?',
'method' => 'post',
]
]);
$button2 = Html::a('<i class="glyphicon glyphicon-pencil"></i>', Url::to(['actualizar', 'id' => $model->id]), [
'title' => 'Actualizar',
'class' => 'pull-right detail-button',
]);
'buttons1' => "{$button1} {$button2}",

Control of active menu items

I'm setting up a small page, so i removed /site/ from the URL. Most pages will be static pages on the site controller, so this looks cleaner.
The menu widget is configured as follows:
$menuItems = [
['label' => 'Home', 'url' => ['/']],
['label' => 'About', 'url' => ['/about']],
['label' => 'Projects', 'url' => ['/projects']],
];
And the config rule is
'rules' => [
'<controller:\w+>/<id:\d+>' => '<controller>/view',
'<controller:\w+>/<action:\w+>/<id:\d+>' => '<controller>/<action>',
'<controller:\w+>/<action:\w+>' => '<controller>/<action>',
'<action:\w+>' => 'site/<action>',
],
Now my problem is that my menu item links are no longer marked as active (css .active). What controlls this, and how can I change it?
Solved.
Change the menuItems like this
$menuItems = [
['label' => 'Home', 'url' => ['/'], 'active' => $this->context->route == 'site/index'],
['label' => 'About', 'url' => ['/about'], 'active' => $this->context->route == 'site/about'],
['label' => 'Projects', 'url' => ['/projects'], 'active' => $this->context->route == 'site/projects'],
];
You should to use 'url' => [controller/action] to get this thing done. And this config will be overwrited by you rules. So, and then class .active will be added automatically.
You can use in_array method to check current URL. In array we need add all urls in which menu is in active state.
'active' => in_array($this->context->route,['items/index','items/create','items/update']),
If we open List page, create page or update page, Item menu will be active.
We can use Controller id to check current controller
'active' => Yii::$app->controller->id == 'items',
I use this code in yii2 for best menu:
\yii\widgets\Menu::widget([
'submenuTemplate' => "\n<ul class='top-nav-menu'>\n{items}\n</ul>\n",
'activateParents' => false,
'activeCssClass' => 'active',
'id' => 'sandwich-menu',
['label' => Yii::t('app', 'Education'), 'url' => ['/site/education'] ],
[
'label' => Yii::t('app', 'Entertainment'),
'url' => '#',
'items' => [
['label' => Yii::t('app', 'Games'), 'url' => ['/site/games']],
['label' => Yii::t('app', 'Music'), 'url' => ['/site/music'] ],
['label' => Yii::t('app', 'Videos'), 'url' => ['/site/videos'] ],
['label' => Yii::t('app', 'Chat & Forum'), 'url' => ['/site/forum'] ],
['label' => Yii::t('app', 'Clubs'), 'url' => ['/site/clubs'] ]
]
],
['label' => Yii::t('app', 'News'), 'url' => ['/site/news']],
['label' => Yii::t('app', 'Contact'), 'url' => ['/site/gencol'] ]
]
])
Actually, as soovorow suggested, it should work with
$menuItems = [
['label' => 'Home', 'url' => ['/']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Projects', 'url' => ['/site/projects']],
];
the problem was that the controlled name was not explicit in
$menuItems = [
['label' => 'Home', 'url' => ['/']],
['label' => 'About', 'url' => ['/about']],
['label' => 'Projects', 'url' => ['/projects']],
];

Yii2 Link FrontEnd To BackEnd

How to link from frontend page to backend in Yii2 using advanced template.... I want to link the login button from frondend to backend...when I click on login button in frontend it can redirect to login page in backend that I already created...
<div class="wrap">
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
$menuItems = [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'About', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
];
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
$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();
?>
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= Alert::widget() ?>
<?= $content ?>
</div>
</div>
`
You can try a relative path
if (Yii::$app->user->isGuest) {
$menuItems[] = ['label' => 'Signup', 'url' => ['/site/signup']];
$menuItems[] = ['label' =>'Login','url' =>'../../../backend/site/login'];
} else {
add this in common/config/main.php
under the section components
'components' => [
.....
'urlManager' => [
'class' => 'yii\web\UrlManager',
'enablePrettyUrl' => false,
'showScriptName' => true,
],
.......
add to section components after urlManager in frontend/config/main.php
'urlManagerBackend' => [
'class' => 'yii\web\UrlManager',
'baseUrl' => 'http://backend.site.local',
'hostInfo' => 'http://backend.site.local',
'enablePrettyUrl' => true,
'enableStrictParsing' => true,
'showScriptName' => false,
],
in frontend/views/layout
add something like this
$menuItems = [
['label' => 'Home', 'url' => ['/site/index']],
['label' => 'Admin panel', 'url' => Yii::$app->urlManagerBackend->createUrl([''])],
];

Yii2: Menu active in different controllers

This is my code:
<?=
Nav::widget([
'options' => ['class' =>'nav-pills nav-stacked'],
'encodeLabels' => false,
'items' => [
[
'label' => 'Blog',
'url' => ['/blog'],
'active' => \Yii::$app->controller->id == 'blog'
],
],
]);
?>
But I want this menu is active not only when the controller is "blog", but also when it is "category" and "post".
Change your code like below:
Nav::widget([
'options' => ['class' =>'nav-pills nav-stacked'],
'encodeLabels' => false,
'items' => [
[
'label' => 'Blog',
'url' => ['/blog'],
'active' => in_array(\Yii::$app->controller->id,['blog','category','post'])
],
],
]);
By above code, your menu item will be considered as active if controller id was one of ['blog','category','post'] values. The only change was:
'active' => in_array(\Yii::$app->controller->id,['blog','category','post'])