how can I correct add show and active class to bootstrap 5 pills?? Now I try to do something like this:
<div class="nav-head">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
#foreach($blocks as $item)
#foreach ($item->offers->take(4) as $offer)
<li class="nav-item" role="presentation">
<a class="nav-link {{ $offer->first ? 'active' : ''}} {{ $offer->first ? 'show' : ''}}" data-bs-toggle="tab" href="#tabs-{{ $offer->id }}">{{ $offer->title }}</a>
</li>
#endforeach
#endforeach
</ul>
</div>
<div class="tab-content" id="pills-tabContent">
#foreach($blocks as $item)
#foreach ($item->offers as $offer)
<div class="tab-pane fade {{ $offer->first ? 'active' : ''}} {{ $offer->first ? 'show' : ''}}" id="tabs-{{ $offer->id }}" role="tabpanel" aria-labelledby="live-chat-tab">
...
</div>
#endforeach
#endforeach
</div>
Line:
{{ $offer->first ? 'active' : ''}} {{ $offer->first ? 'show' : ''}}
but it doesn't work. Can you help me? Thanks!
It should be $loop->first not $offer->first
When looping, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:
{{$loop->first ? 'active' : ''}} {{$loop->first ? 'show' : ''}}
Ref:https://laravel.com/docs/8.x/blade#the-loop-variable
Related
I'm trying to create a bootstrap carousel album thumbnail.
My code is here...
<div class="col-lg-9 mb-3">
<div id="myCarousel" class="carousel slider d-flex justify-content-center" data-bs-ride="carousel">
<div class="carousel-inner">
#foreach($galleries as $gallery)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img src="{{ asset('storage/'.$gallery->image) }}" class="img-fluid rounded" alt="{{ $product->title }}">
</div>
#endforeach
</div>
<ol class="carousel-indicators list-inline bottom-12">
#foreach($galleries as $gallery)
<li class="list-inline-item {{ $loop->first ? 'active' : '' }}">
<a id="carousel-selector-{{ $gallery->id }}" class="{{ $loop->first ? 'selected' : '' }}" data-bs-slide-to="{{ $gallery->id }}" data-bs-target="#myCarousel">
<img src="{{ asset('storage/'.$gallery->image) }}" class="img-fluid rounded" alt="{{ $product->title }}">
</a>
</li>
#endforeach
</ol>
</div>
</div>
But when I click on the carousel's indicators, I receive this error from bootstrap.min.js:
Now my question is what is wrong with my code/solution?
I'm trying to do what language is included in it added class"active"
I try this way but it doesn't work for me
<div class="lang">
<ul>
#foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
<li>
<a
class="{{ Request::path() === LaravelLocalization::getLocalizedURL() ? 'active' : ''}}"
rel="alternate"
hreflang="{{ $localeCode }}"
href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
{{ $properties['native'] }}
</a>
</li>
#endforeach
</ul>
</div>
You should do:
{{ $localeCode == LaravelLocalization::getCurrentLocale() ? 'active' : ''}}
If I want to add active class to routes I'll use:
class="{{ Route::currentRouteNamed('products.index') ? 'active' : '' }}"
If I want use it in static links I'll use:
class="{{ Request::is('/blog') ? 'active' : ''}}"
But what If I want to use it on dynamic url's? like adding custom link to my menu then I have something like:
#foreach($menus as $menu)
<li class="">
{{$menu->title}}
</li>
#endforeach
now what should i use as my li class in order to add active class?
If $menu->link looks like home for example, do the same:
<a href="{{ $menu->link }}" {{ request()->is($menu->link) ? 'class="active"' : '' }}>{{ $menu->title }}</a>
Try using the below code :
#foreach($menus as $menu)
<li class="{{Request::is($menu->link) ? 'active': ''}}">
{{$menu->title}}
</li>
#endforeach
Hi experts I'm trying to display here a content depending on logged in user. If their role id = 2, the link will be diplayed in the sidebar. But then it has an error. Thanks
#if(({{ Auth::user()->role_id }})=="2")
<li class="{{ Request::is('activity*') ? 'active open' : '' }}">
<i class="fa fa-list-alt"></i> {{ Auth::user()->role_id }} User Log
</li>
#endif
#if((Auth::user()->role_id)=="2")
<li class="{{ Request::is('activity*') ? 'active open' : '' }}">
<i class="fa fa-list-alt"></i> {{ Auth::user()->role_id }} User Log
</li>
#endif
No need for the {{ }} as # already means you are using php
help or assist as it does not turn out to make sorting on categories, I can not understand as to solve this problem.
I recently study laravel.
Controller: class ArticlesController
public function showAll ($category_id)
{
$categories = Category::where('name', $category_id)->get();
return view('categories')->with(compact('categories', 'articles'));
}
This view from which I want to go into categories. site.blade.php
#foreach($categories as $category)
<li><a class="nav-link text-white" href={{route('articlesShow', ['id'=>$category->id]) }}">{{ $category->name }}</a></li>
#endforeach
Route:
Route::get('/categories/{category_id}', 'ArticlesController#showAll')->name('articlesShow');
Model: Category
public function articles()
{
return $this->hasMany(Article::class, 'category_id');
}
Representation in which does not get to get: categories.blade.php
#foreach($categories->articles as $article)
<div class="col-6 col-lg-4"> <!--Post -->
<img src="{{ asset('upload/image/1.jpg') }}" width="255" alt="..." class="rounded img_size">
<h4> {{ $article->title }}</h4>
<h6>Category: {{ $article->category->name }}</h6>
<h6>Author: {{ $article->author }}</h6>
<p>{{ $article->text }} </p>
<p><a class="btn btn-secondary" href="{{ route('articleShow', ['id' =>$article->id]) }}"> More »</a></p>
</div><!--EndPost-->
#endforeach
$categories is an array that contains categories, and the articles property belongs to a category, therefore you have to loop the categories before you can access the articles.
try this:
#foreach($categories as $category)
#foreach($category->articles as $article)
<div class="col-6 col-lg-4"> <!--Post -->
<img src="{{ asset('upload/image/1.jpg') }}" width="255" alt="..." class="rounded img_size">
<h4> {{ $article->title }}</h4>
<h6>Category: {{ $article->category->name }}</h6>
<h6>Author: {{ $article->author }}</h6>
<p>{{ $article->text }} </p>
<p><a class="btn btn-secondary" href="{{ route('articleShow', ['id' =>$article->id]) }}"> More »</a></p>
</div><!--EndPost-->
#endforeach
#endforeach
First of all: use eager loading.
Assuming, your ArticlesController#showAll method should display all articles for a given category id, your query should look like this
public function showAll ($category_id)
{
$categoryArticles = Category::with('articles')->where('id', $category_id)->get();
return view('categories')->with('categoryArticles', $categoryArticles);
}
Then to display all articles for the given category (assuming an article has only one category), this could be one way:
#foreach($categoryArticles->articles as $article)
<div class="col-6 col-lg-4"> <!--Post -->
<img src="{{ asset('upload/image/1.jpg') }}" width="255" alt="..." class="rounded img_size">
<h4> {{ $article->title }}</h4>
<h6>Category: {{ $categoryArticles->name }}</h6>
<h6>Author: {{ $article->author }}</h6>
<p>{{ $article->text }} </p>
<p><a class="btn btn-secondary" href="{{ route('articleShow', ['id' =>$article->id]) }}"> More »</a></p>
</div><!--EndPost-->
#endforeach