hskwon
a72e4c4127
- table-swipe.blade.php 컴포넌트 생성 - CSS 터치 스크롤 최적화 및 스크롤바 스타일 추가 - 11개 테이블에 x-table-swipe 컴포넌트 적용 - 모바일에서 스와이프 힌트 애니메이션 표시 (sm 미만)
24 lines
1017 B
PHP
24 lines
1017 B
PHP
@props(['showHint' => true])
|
|
|
|
<div class="relative">
|
|
<!-- 스와이프 가능한 컨테이너 -->
|
|
<div class="overflow-x-auto -mx-4 sm:mx-0 scrollbar-thin" data-table-swipe>
|
|
<div class="inline-block min-w-full align-middle px-4 sm:px-0">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 스와이프 힌트 (모바일에서만) -->
|
|
@if($showHint)
|
|
<div class="sm:hidden flex items-center justify-center gap-2 mt-2 text-xs text-gray-400 swipe-hint">
|
|
<svg class="w-4 h-4 swipe-arrow-left" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>
|
|
</svg>
|
|
<span>좌우로 스와이프</span>
|
|
<svg class="w-4 h-4 swipe-arrow-right" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</div>
|
|
@endif
|
|
</div>
|