Question

Wondering if it's possible to use two classes in blade, look at comment here. One of the class is linked to check if it's active and the other is for the icon.

 <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li> <a class='home' {{HTML::linkRoute('hvertime','Forside')}} </a> </li>
          HERE // <li <a class='home' @if($aktiv == 'hvertredjetime'){{ "class='active'" }}@endif>{{HTML::linkRoute('hvertredjetime','Måling')}} </a></li>
            <li @if($aktiv == 'gjoremal'){{ "class='active'" }}@endif>{{HTML::linkRoute('gjoremal','Daglige Oppgaver')}} </li>
            <li @if($aktiv == 'dagvakt'){{ "class='active'" }}@endif>{{HTML::linkRoute('dagvakt','Dagvakt')}}</li>
            <li @if($aktiv == 'kveldsvakt'){{ "class='active'" }}@endif>{{HTML::linkRoute('kveldsvakt','Kveldsvakt')}}</li>
            <li @if($aktiv == 'kontrollcm'){{ "class='active'" }}@endif>{{HTML::linkRoute('kontrollcm','Kontroll CM')}}</li>
            <li @if($aktiv == 'sok'){{ "class='active'" }}@endif>{{HTML::linkRoute('sok','Søk')}}</li>  
              {{--  <li @if($aktiv == 'diagrammer'){{ "class='active'" }}@endif>{{HTML::linkRoute('diagrammer','Diagrammer')}}</li>  --}} 
              {{--  <li @if($aktiv == 'rapport'){{ "class='active'" }}@endif>{{HTML::linkRoute('rapport','Rapport')}}</li>  --}} 

          </ul>

css.

.navbar-default .navbar-nav>.active>a:before,
.navbar-nav>li>a:before {
    background-repeat: no-repeat;
    background-position: 0 top;
    content: "";
    display: inline-block;
    height: 29px;
    margin-right: 10px;
    vertical-align: middle;
    width: 29px;
}

.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.home:before { background-image: url('http://i.imgur.com/j2s9NKB.png'); }

.navbar-default .navbar-nav>.active>a.home:before,
.navbar-nav>li>a.home:before { background-image: url('http://i.imgur.com/j2s9NKB.png'); }
Was it helpful?

Solution

you can use checks in blade within the double braces like this and add additional classes according to variable values.

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li>
      <a class='home'>{{ HTML::linkRoute('hvertime','Forside') }}</a>
    </li>
    <li class='{{ ($aktiv == 'hvertredjetime') ? 'active' : '' }}'>
      <a class='home'>{{HTML::linkRoute('hvertredjetime','Måling')}}</a>
    </li>
    ...
  </ul>
</div>

also see http://www.php.net/manual/en/language.operators.comparison.php for the ternary operators.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top