novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toggle Ambang SP: switch ala iOS dengan glow warna level

Browse Source 
- Ukuran standar iOS (w-11 h-6, knob 20px) — konsisten dgn toggle halaman lain
- Knob bergeser penuh dengan transisi halus; track gradient warna level + glow
  saat aktif, slate + inset shadow saat nonaktif
- Reaktif via Alpine (x-model) — track & glow berubah langsung saat di-toggle
This commit is contained in:
Novy San87
2026-08-03 17:44:17 +07:00
parent 652422c3eb
commit ffebf61322
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/settings/thresholds.blade.php
+8 -6
View File
@@ -59,13 +59,15 @@
</div> </div>
<div class="flex items-center gap-1.5 flex-shrink-0"> <div class="flex items-center gap-1.5 flex-shrink-0">
{{-- Toggle aktif --}} {{-- Toggle aktif (iOS-style + glow) --}}
<label class="relative inline-flex items-center cursor-pointer p-1.5" title="{{ $t->is_active ? 'Klik untuk nonaktifkan' : 'Klik untuk aktifkan' }}"> <label x-data="{ on: {{ $t->is_active ? 'true' : 'false' }} }" class="relative inline-flex items-center cursor-pointer p-1.5 select-none" title="{{ $t->is_active ? 'Klik untuk nonaktifkan' : 'Klik untuk aktifkan' }}">
<input type="checkbox" name="thresholds[{{ $loop->index }}][is_active]" value="1" <input type="checkbox" name="thresholds[{{ $loop->index }}][is_active]" value="1"
{{ $t->is_active ? 'checked' : '' }} {{ $t->is_active ? 'checked' : '' }} x-model="on" class="sr-only peer">
class="sr-only peer"> <div class="w-11 h-6 rounded-full transition-all duration-300"
<div class="w-9 h-5 bg-slate-200 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:border-transparent" :style="on ? 'background: linear-gradient(135deg, {{ $t->color }}, {{ $t->color }}cc); box-shadow: 0 0 14px 2px {{ $t->color }}4d;' : 'background-color: #e2e8f0; box-shadow: inset 0 1px 3px rgba(15,23,42,0.1);'">
style="{{ $t->is_active ? 'background-color: ' . $t->color : '' }}"></div> <div class="absolute top-[2px] left-[2px] h-5 w-5 bg-white rounded-full shadow-md transition-all duration-300"
:class="on ? 'translate-x-5' : ''"></div>
</div>
</label> </label>
{{-- Hapus --}} {{-- Hapus --}}