tabs component added for modal titles

This commit is contained in:
Burak Civan
2022-08-17 16:14:07 +03:00
parent d5925e48c7
commit bb2c6372a0
8 changed files with 263 additions and 370 deletions

View File

@ -1,12 +1,10 @@
@props(['active'])
<div x-data="{ active: '{{ $active }}' }">
<div {{ $attributes }}>
<div>
<ul class="flex items-center">
{!! $navs !!}
</ul>
</div>
<div>
<ul {{ ((! $attributes->has('override')) || ($attributes->has('override') && ! in_array('class', explode(',', $attributes->get('override'))))) ? $attributes->merge(['class' => 'flex items-center']) : $attributes }}>
{!! $navs !!}
</ul>
</div>
{!! $content !!}

View File

@ -1,13 +1,11 @@
@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),
])
<li
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 }}"
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'"
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 }}
>
@if ($slot->isNotEmpty())

View File

@ -1,14 +1,12 @@
@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),
])
<li
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 }}"
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'"
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 }}
>
@if ($slot->isNotEmpty())