Merge pull request #2727 from brkcvn/long-tabs

Swiper slider added into the tabs.
This commit is contained in:
Cüneyt Şentürk
2022-11-17 10:08:09 +03:00
committed by GitHub
5 changed files with 88 additions and 4 deletions

View File

@ -160,7 +160,7 @@
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
@stack('transactions_nav_end')
</x-slot>

View File

@ -1,8 +1,16 @@
@props(['active'])
<div x-data="{ active: window.location.hash.split('#')[1] == undefined ? '{{ $active }}' : window.location.hash.split('#')[1] }">
<div>
<ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center overflow-x-scroll lg:overflow-visible']) : $attributes }}>
@php
if (! empty($attributes['slides'])) {
$slides = $attributes['slides'];
} else {
$slides = null;
}
@endphp
<div 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' => 'inline-flex']) : $attributes }}>
{!! $navs !!}
</ul>
</div>

View File

@ -5,6 +5,7 @@
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 }}
>

View File

@ -5,6 +5,7 @@
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 }}