tabs javascript function
This commit is contained in:
@ -10,19 +10,11 @@
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div id="{{ $id }}" data-swiper="{{ $slides }}" class="swiper" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
|
||||
<div class="swiper-tabs-container">
|
||||
<ul class="swiper-wrapper" {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
|
||||
<div id="{{ $id }}" data-swiper="{{ $slides }}" x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
|
||||
<div data-tabs-swiper>
|
||||
<ul data-tabs-swiper-wrapper {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
|
||||
{!! $navs !!}
|
||||
</ul>
|
||||
|
||||
<div class="swiper-button-next top-3 right-0">
|
||||
<span class="material-icons">chevron_right</span>
|
||||
</div>
|
||||
|
||||
<div class="swiper-button-prev top-3 left-0">
|
||||
<span class="material-icons">chevron_left</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! $content !!}
|
||||
|
@ -1,10 +1,11 @@
|
||||
@props(['id', 'name', 'href', 'active'])
|
||||
|
||||
<li
|
||||
class="swiper-slide relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
|
||||
class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
|
||||
id="tab-{{ $id }}"
|
||||
data-id="tab-{{ $id }}"
|
||||
data-tabs="{{ $id }}"
|
||||
data-tabs-slide
|
||||
x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
|
||||
{{ $attributes }}
|
||||
>
|
||||
|
@ -1,10 +1,11 @@
|
||||
@props(['id', 'name', 'active'])
|
||||
|
||||
<li
|
||||
class="swiper-slide relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
|
||||
class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
|
||||
id="tab-{{ $id }}"
|
||||
data-id="tab-{{ $id }}"
|
||||
data-tabs="{{ $id }}"
|
||||
data-tabs-slide
|
||||
x-on:click="active = '{{ $id }}'"
|
||||
x-bind:class="active != '{{ $id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
|
||||
{{ $attributes }}
|
||||
|
Reference in New Issue
Block a user