dropdown.blade.php (1347B)
1 @props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white dark:bg-gray-700']) 2 3 @php 4 switch ($align) { 5 case 'left': 6 $alignmentClasses = 'origin-top-left left-0'; 7 break; 8 case 'top': 9 $alignmentClasses = 'origin-top'; 10 break; 11 case 'right': 12 default: 13 $alignmentClasses = 'origin-top-right right-0'; 14 break; 15 } 16 17 switch ($width) { 18 case '48': 19 $width = 'w-48'; 20 break; 21 } 22 @endphp 23 24 <div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false"> 25 <div @click="open = ! open"> 26 {{ $trigger }} 27 </div> 28 29 <div x-show="open" 30 x-transition:enter="transition ease-out duration-200" 31 x-transition:enter-start="opacity-0 scale-95" 32 x-transition:enter-end="opacity-100 scale-100" 33 x-transition:leave="transition ease-in duration-75" 34 x-transition:leave-start="opacity-100 scale-100" 35 x-transition:leave-end="opacity-0 scale-95" 36 class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}" 37 style="display: none;" 38 @click="open = false"> 39 <div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}"> 40 {{ $content }} 41 </div> 42 </div> 43 </div>