akaunting 3.0 (the last dance)
This commit is contained in:
13
resources/views/components/tabs/index.blade.php
Normal file
13
resources/views/components/tabs/index.blade.php
Normal file
@ -0,0 +1,13 @@
|
||||
@props(['active'])
|
||||
|
||||
<div x-data="{ active: '{{ $active }}' }">
|
||||
<div {{ $attributes }}>
|
||||
<div>
|
||||
<ul class="flex items-center">
|
||||
{!! $navs !!}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!! $content !!}
|
||||
</div>
|
19
resources/views/components/tabs/nav-link.blade.php
Normal file
19
resources/views/components/tabs/nav-link.blade.php
Normal file
@ -0,0 +1,19 @@
|
||||
@props(['id', 'name', 'href', 'active'])
|
||||
|
||||
<li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link"
|
||||
@class([
|
||||
'text-purple border-purple transition-al 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' => !empty($active),
|
||||
])
|
||||
id="tab-{{ $id }}"
|
||||
data-id="tab-{{ $id }}"
|
||||
data-tabs="{{ $id }}"
|
||||
x-bind:class="active != '{{ $id }}' ? '' : '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'"
|
||||
>
|
||||
@if ($slot->isNotEmpty())
|
||||
{!! $slot !!}
|
||||
@else
|
||||
<a href="{{ $href }}">
|
||||
{{ $name }}
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
18
resources/views/components/tabs/nav.blade.php
Normal file
18
resources/views/components/tabs/nav.blade.php
Normal file
@ -0,0 +1,18 @@
|
||||
@props(['id', 'name', 'active'])
|
||||
|
||||
<li class="relative px-8 text-sm text-black text-center pb-2 cursor-pointer transition-all border-b tabs-link"
|
||||
@class([
|
||||
'text-purple border-purple transition-al 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' => !empty($active),
|
||||
])
|
||||
id="tab-{{ $id }}"
|
||||
data-id="tab-{{ $id }}"
|
||||
data-tabs="{{ $id }}"
|
||||
x-on:click="active = '{{ $id }}'"
|
||||
x-bind:class="active != '{{ $id }}' ? '' : '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'"
|
||||
>
|
||||
@if ($slot->isNotEmpty())
|
||||
{!! $slot !!}
|
||||
@else
|
||||
{{ $name }}
|
||||
@endif
|
||||
</li>
|
5
resources/views/components/tabs/tab.blade.php
Normal file
5
resources/views/components/tabs/tab.blade.php
Normal file
@ -0,0 +1,5 @@
|
||||
@props(['id'])
|
||||
|
||||
<div id="tab-{{ $id }}" data-tabs-content="{{ $id }}" x-show="active === '{{ $id }}'">
|
||||
{{ $slot }}
|
||||
</div>
|
Reference in New Issue
Block a user