shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

long item controlled for long tab items

Browse Source
This commit is contained in:
Burak Civan 2022-10-31 09:39:58 +03:00
parent 94554a463e
commit 9a495ce457
5 changed files with 72 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
resources/assets/js/views/common/contacts.js vendored
View File

@ -37,6 +37,25 @@ const app = new Vue({
mounted() {
this.form.create_user = false;
//swiper slider for long tabs items
for (let [index, item] of document.querySelectorAll('[data-swiper]').entries()) {
item.id = index;
new Swiper(".swiper-tabs-container", {
loop: false,
slidesPerView: Number(item.getAttribute('data-swiper')),
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}
//swiper slider for long tabs items
},
methods:{

30
resources/views/components/contacts/show/content.blade.php
View File

@ -134,7 +134,7 @@
@if (! $hideBottomRight)
<x-show.content.right>
<x-tabs active="documents">
<x-tabs id="" slides="3" active="documents">
<x-slot name="navs">
@stack('documents_nav_start')
@ -146,6 +146,34 @@
@stack('transactions_nav_start')
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"
/>
<x-tabs.nav
id="transactions"
name="{{ trans_choice('general.transactions', 2) }}"

26
resources/views/components/tabs/index.blade.php
View File

@ -1,10 +1,28 @@
@props(['active'])
@props(['active', 'id'])
<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']) : $attributes }}>
@php
if (! empty($attributes['slides'])) {
$slides = $attributes['slides'];
}
if (empty($attributes['slides'])) {
$slides = '2';
}
@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 }}>
{!! $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 !!}

2
resources/views/components/tabs/nav-link.blade.php
View File

@ -1,7 +1,7 @@
@props(['id', 'name', 'href', 'active'])
<li
class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
class="swiper-slide 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 }}"

2
resources/views/components/tabs/nav.blade.php
View File

@ -1,7 +1,7 @@
@props(['id', 'name', 'active'])
<li
class="relative px-8 text-sm text-center pb-2 cursor-pointer transition-all border-b tabs-link"
class="swiper-slide 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 }}"