Temel bileşenler.
Ürün ekiplerinin ortak davranış, görünüm ve erişilebilirlik beklentilerini taşıyan temel bileşen paketi.
Renkler
Acun UI paleti. Bileşenler Tailwind'in renk adlarını (brand, gray, zinc, emerald…) kullanır; değerleri panel.css içindeki @theme bloğu belirler. Her rengin açık ve koyu tonları tek bir temel değerden color-mix ile türer, bu yüzden bir rengi değiştirmek tek satırdır.
<div class="space-y-3">
@foreach (['brand' => 'Ana renk', 'emerald' => 'Başarı', 'sky' => 'Bilgi', 'amber' => 'Uyarı', 'red' => 'Tehlike'] as $renk => $ad)
<div class="grid grid-cols-[6rem_1fr] items-center gap-3">
<span class="text-xs font-medium text-gray-500 dark:text-zinc-400">{{ $ad }}</span>
<div class="grid grid-cols-11 overflow-hidden rounded-sm">
@foreach ([50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as $ton)
<span class="h-9" style="background: var(--color-{{ $renk }}-{{ $ton }})" title="{{ $renk }}-{{ $ton }}"></span>
@endforeach
</div>
</div>
@endforeach
</div>Tipografi
Metinler Public Sans, kod ve sayı etiketleri DM Mono ile yazılır (ikisi de SIL Open Font License). Bileşenlerin gövde metni 14px (text-sm); başlık etiketleri mürekkep rengini ve hafif negatif harf aralığını kendiliğinden alır.
<div class="space-y-4">
<p class="text-4xl font-bold tracking-tight">Aylık satışlar · 4xl / 40px</p>
<p class="text-3xl font-bold tracking-tight">Aylık satışlar · 3xl / 32px</p>
<h1 class="text-2xl font-semibold">Sayfa başlığı · 2xl / 26px</h1>
<h2 class="text-xl font-semibold">Bölüm başlığı · xl / 21px</h2>
<h3 class="text-lg font-semibold">Alt bölüm · lg / 18px</h3>
<h4 class="text-base font-semibold">Kart başlığı (büyük) · base / 16px</h4>
<h5 class="text-sm font-semibold">Kart başlığı · sm / 14px</h5>
<h6 class="text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-zinc-400">Bölüm etiketi · xs / 12px</h6>
</div>İkonlar
Heroicons v2 (MIT): 324 ikon, outline ve solid stilde. Çizimler pakete gömülüdür; ikon fontu, CDN ya da ek paket gerekmez ve sayfaya yalnızca kullanılan ikon girer.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="home" />
<acun:icon name="map-pin" />
<acun:icon name="truck" />
<acun:icon name="users" />
<acun:icon name="document-text" />
</div>Dikey düzen
Sol menülü panel düzeni. Masaüstünde daraltılabilen yan menü, mobilde soldan açılan çekmece ve sayfa başlığı, arama, işlemler, tema düğmesi ile kullanıcı menüsünü taşıyan yüzen bir üst çubuk içerir. Uygulamanın ana düzeni olarak HTML belgesinin tamamını çizer.
<acun:layout.sidebar
:title="$title ?? null"
brand-name="Acun Panel"
brand-tagline="Mağaza Yönetimi"
:home-url="route('dashboard')"
>
<acun:slot:head>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:logo><img src="/logo.svg" alt="" class="size-7"></acun:slot:logo>
<acun:slot:nav>
<acun:menu menu="main" />
</acun:slot:nav>
{{ $slot }}
</acun:layout.sidebar>Yatay düzen
Üst menülü panel düzeni. Menü geniş ekranda üst çubukta yatay durur, lg altında soldan açılan çekmeceye geçer. Menüsü kısa olan uygulamalar için dikey düzene bir alternatiftir.
<acun:layout.horizontal :title="$title ?? null" brand-name="Acun Panel" :home-url="route('dashboard')">
<acun:slot:head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:nav>
<acun:nav.horizontal-item :href="route('dashboard')" title="Anasayfa" :active="request()->routeIs('dashboard')" />
<acun:nav.horizontal-group title="Müşteriler" :active="request()->routeIs('musteriler.*')">
<acun:nav.sub-item compact :href="route('musteriler.index')" title="Müşteri Listesi" />
<acun:nav.sub-item compact :href="route('musteri-gruplari.index')" title="Müşteri Grupları" />
</acun:nav.horizontal-group>
</acun:slot:nav>
{{ $slot }}
</acun:layout.horizontal>Giriş düzeni
Giriş, kayıt, şifre sıfırlama ve iki adımlı doğrulama sayfalarının düzeni. İki türü vardır: solda illüstrasyon ve sağda form (cover) ya da ortada tek kart (basic).
<acun:layout.auth title="Giriş">
<acun:slot:head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:logo><img src="/logo.svg" alt="Acun Panel" class="h-8 w-auto"></acun:slot:logo>
<acun:auth-header title="Hoş geldiniz" description="Devam etmek için hesabınıza giriş yapın." />
<acun:auth-session-status class="mt-4" :status="session('status')" />
<form wire:submit="login" class="mt-6 space-y-4">
<acun:input wire:model="email" type="email" variant="floating" label="E-posta" />
<acun:input wire:model="password" type="password" variant="floating" label="Şifre" viewable />
<acun:checkbox wire:model="remember" label="Beni hatırla" />
<acun:button type="submit" class="w-full">Giriş Yap</acun:button>
</form>
</acun:layout.auth>Mesaj düzeni
404, 403, 500, bakım ve yakında sayfaları için tam sayfa mesaj düzeni: büyük bir kod, başlık, açıklama, düğmeler ve isteğe bağlı bir illüstrasyon. Kendi belgesi olan bir sayfada aynı ekran için `acun:message-panel` kullanın.
{{-- resources/views/errors/404.blade.php --}}
<acun:layout.message code="404" heading="Sayfa bulunamadı" description="Aradığınız sayfa taşınmış ya da silinmiş olabilir.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<acun:slot:action>
<acun:button :href="url('/')">Anasayfaya dön</acun:button>
<acun:button :href="url()->previous()" variant="white">Geri git</acun:button>
</acun:slot:action>
</acun:layout.message>Head
<head> içeriği: meta etiketleri, sayfa başlığı, görünüm ayarları (veri olarak) ve tema ile menü durumunu ilk boyamadan önce uygulayan küçük script (acun-ui-boot.js). Alpine store'ları (appearance, brand, sidebar, navbar, customizer) Acun UI JavaScript'inden gelir: import '@acunsoft/acun-ui-core' ya da @acunUiScripts. Hazır düzenler bunu kendileri ekler; yalnızca kendi düzeninizi yazarken gerekir.
<!DOCTYPE html>
<html lang="tr">
<head>
<acun:layout.head :title="$title ?? null">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:layout.head>
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>Konum çubuğu
Sayfanın uygulamadaki yerini gösteren konum çubuğu. Başa ev ikonlu kök bağlantı kendiliğinden eklenir; son öğe bulunulan sayfa olarak düz metin çizilir.
<acun:breadcrumb home-url="#" :items="[
['label' => 'Müşteriler', 'url' => '#'],
['label' => 'Müşteri Listesi', 'url' => '#'],
['label' => 'Düzenle'],
]" />Tema düğmesi
Açık ve koyu tema arasında geçiş yapan ikon düğmesi. Tercih tarayıcıda saklanır, düzende preference-url varsa hesaba da kaydedilir. İkon CSS ile seçildiği için sayfa ilk açıldığında da doğru görünür.
Temel kart
İçeriği başlık, işlem alanı ve alt çubukla birlikte beyaz bir yüzeyde toplar. Panellerdeki özetler, listeler ve formlar için temel kaptır; daraltılabilir ve kapatılabilir.
<acun:card title="Kadıköy deposu" subtitle="IST-04 · 148 sipariş">
<p class="text-sm text-gray-600 dark:text-zinc-400">Bu ay 112 sipariş kargoya verildi, 36 sipariş bekliyor.</p>
</acun:card>İstatistik kartları
Tek bir sayıyı etiketi, ikonu ve önceki döneme göre değişimiyle öne çıkarır. Pano özetlerinde yan yana dizilerek kullanılır.
Grafikli kartlar
Kart içine yerleştirilmiş ApexCharts grafikleri. Aylık karşılaştırmalar, oranlar ve eğilimler için acun:card ile acun:chart birlikte kullanılır.
<acun:card title="Aylık siparişler" subtitle="Son 6 ay">
<acun:chart :height="260" :options="[
'chart' => ['type' => 'bar'],
'series' => [['name' => 'Sipariş', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]], ['name' => 'İade', 'data' => [240, 198, 221, 260, 190, 214]]],
'xaxis' => ['categories' => ['Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl']],
'colors' => ['primary', '#e5e7eb'],
'plotOptions' => ['bar' => ['borderRadius' => 4, 'columnWidth' => '45%']],
'dataLabels' => ['enabled' => false],
'legend' => ['position' => 'top', 'horizontalAlign' => 'left'],
]" />
</acun:card>İşlemli kartlar
Kart başlığındaki işlem alanı: açılır menü, düğmeler, daraltma ve kapatma. İçerik yenilenirken kart acun:loading-overlay ile kilitlenir.
<acun:card title="Ürün özeti" subtitle="Eylül 2026">
<acun:slot:actions>
<acun:dropdown align="end">
<acun:slot:trigger>
<button type="button" class="flex size-7 cursor-pointer items-center justify-center rounded-sm text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-800" aria-label="İşlemler"><acun:icon name="ellipsis-vertical" size="4" /></button>
</acun:slot:trigger>
<acun:dropdown.item>Yenile</acun:dropdown.item>
<acun:dropdown.item>Excel'e aktar</acun:dropdown.item>
<acun:dropdown.item href="#">Ürünleri aç</acun:dropdown.item>
</acun:dropdown>
</acun:slot:actions>
<p class="text-sm text-gray-600 dark:text-zinc-400">38 yayında ürün, 4 taslak ürün.</p>
</acun:card>Kart ve sekmeler
Bir kaydın farklı yönlerini tek kartta sekmelerle göstermek için iki bileşenin birlikte kullanımı. Her bileşenin tüm seçenekleri kendi sayfasında (Temel kart, Sekmeler) anlatılır.
<acun:card title="Müşteri özeti">
<acun:slot:actions><acun:button variant="ghost" size="sm">Düzenle</acun:button></acun:slot:actions>
<acun:tabs :tabs="['bilgi' => 'Bilgi', 'siparis' => 'Siparişler', 'belge' => 'Belgeler']">
<acun:tab-panel value="bilgi"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium üye · İstanbul</p></acun:tab-panel>
<acun:tab-panel value="siparis"><acun:progress :value="75" label="Yıllık hedef" /></acun:tab-panel>
<acun:tab-panel value="belge"><acun:empty-state title="Belge yok" /></acun:tab-panel>
</acun:tabs>
</acun:card>Accordion
Başlığına tıklanınca açılıp kapanan bölümler. Sık sorulan sorular ve uzun içeriklerin gruplanması için uygundur; varsayılan olarak aynı anda tek bölüm açık kalır.
<acun:accordion open="kargo">
<acun:accordion.item name="kargo" title="Siparişim ne zaman kargoya verilir?">
Saat 15:00'e kadar verilen siparişler aynı gün kargoya verilir; takip numarası e-postayla gönderilir.
</acun:accordion.item>
<acun:accordion.item name="iade" title="Ürünü nasıl iade ederim?">
Hesabım > Siparişlerim sayfasından iade talebi oluşturun; iade kargo kodu 14 gün geçerlidir.
</acun:accordion.item>
<acun:accordion.item name="aktarim" title="Excel'den ürün aktarılabilir mi?">
Evet, Aktarımlar menüsünden şablonu indirip doldurduktan sonra yükleyebilirsiniz.
</acun:accordion.item>
</acun:accordion>Uyarı
İlgili içeriğin hemen üstünde, sayfanın içinde duran bildirim kutusu. İşlem sonucu, dikkat gerektiren bir durum ya da kalıcı bir hata için kullanılır; birkaç saniyelik geri bildirim için Toast daha uygundur.
<div class="space-y-3">
<acun:alert>Ekim kampanya takvimi yayınlandı.</acun:alert>
<acun:alert variant="success">Ürün bilgileri güncellendi.</acun:alert>
<acun:alert variant="warning">Silinen kayıtlar da listeleniyor.</acun:alert>
<acun:alert variant="danger">Müşterinin 3 açık siparişi olduğu için silme işlemi yapılmadı.</acun:alert>
</div>Rozet
Durum, kategori ya da sayı göstermek için küçük, yuvarlak etiket. Tablo hücrelerinde, kart başlıklarında ve düğmelerin içinde kullanılır.
<div class="flex flex-wrap items-center gap-2">
<acun:badge>Taslak</acun:badge>
<acun:badge variant="success">Aktif</acun:badge>
<acun:badge variant="warning">Beklemede</acun:badge>
<acun:badge variant="danger">Pasif</acun:badge>
<acun:badge variant="info">Bilgilendirildi</acun:badge>
<acun:badge variant="primary">Yeni</acun:badge>
<acun:badge variant="dark">Arşiv</acun:badge>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<acun:badge solid>Taslak</acun:badge>
<acun:badge variant="success" solid>Aktif</acun:badge>
<acun:badge variant="warning" solid>Beklemede</acun:badge>
<acun:badge variant="danger" solid>Pasif</acun:badge>
<acun:badge variant="info" solid>Bilgilendirildi</acun:badge>
<acun:badge variant="primary" solid>Yeni</acun:badge>
<acun:badge variant="dark" solid>Arşiv</acun:badge>
</div>Buton
İşlem başlatan buton. href verilirse bağlantı, verilmezse button öğesi çizer; dolu, outline ve soft renk varyantları, renkli gölge, üç boyut, yalnızca ikonlu biçim ve yükleniyor durumu vardır.
<div class="flex flex-wrap gap-2">
<acun:button>Kaydet</acun:button>
<acun:button variant="success">Onayla</acun:button>
<acun:button variant="danger">Sil</acun:button>
<acun:button variant="warning">Beklet</acun:button>
<acun:button variant="info">Bilgi</acun:button>
<acun:button variant="secondary">Arşivle</acun:button>
<acun:button variant="dark">Taslak</acun:button>
<acun:button variant="light">Önizle</acun:button>
<acun:button variant="white">Vazgeç</acun:button>
<acun:button variant="ghost">Seçimi temizle</acun:button>
<acun:button variant="link">Tümünü gör</acun:button>
</div>Buton grubu
Birbiriyle ilgili butonları bitişik, tek parça bir grup olarak gösterir. Dönem seçimi ya da ikonlu araç çubukları için uygundur.
<acun:button-group aria-label="Dönem">
<acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Gün</acun:button>
<acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Hafta</acun:button>
<acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Ay</acun:button>
</acun:button-group>Carousel
Slaytlar arasında oklarla, noktalarla ya da klavyeyle geçiş yapılan gösterim. Duyurular ve görsel galerileri için kullanılır; istenirse kendiliğinden ilerler.
<acun:carousel label="Duyurular">
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-brand-600 to-brand-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Ekim kampanyası</p>
<p class="mt-1 text-xl font-semibold">7 Ekim'de başlıyor</p>
</div>
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-emerald-600 to-emerald-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Mobil uygulama</p>
<p class="mt-1 text-xl font-semibold">Sürüm 2.4 yayında</p>
</div>
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-amber-500 to-amber-700 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Hatırlatma</p>
<p class="mt-1 text-xl font-semibold">Eylül raporları 3 Ekim'e kadar</p>
</div>
</acun:carousel>Collapse
Bir bağlantıya tıklanınca altındaki alanı açıp kapatır. Ayrıntıları, ek seçenekleri ya da uzun açıklamaları ilk bakışta gizlemek için kullanılır.
<acun:collapse label="Aktarım ayrıntıları">
<p class="text-sm text-gray-600 dark:text-zinc-400">1.248 satır okundu: 1.201 ürün eklendi, 39 ürün güncellendi, 8 satır geçersiz barkod nedeniyle atlandı.</p>
</acun:collapse>Açılır menü
Bir düğmeye tıklayınca altında açılan işlem listesi. Dışa aktarma seçenekleri ya da satır işlemleri gibi, ekranda sürekli yer kaplaması gerekmeyen işlemleri toplar.
<acun:dropdown align="start">
<acun:slot:trigger>
<acun:button variant="white">Dışa aktar</acun:button>
</acun:slot:trigger>
<acun:dropdown.item>Excel (.xlsx)</acun:dropdown.item>
<acun:dropdown.item>PDF</acun:dropdown.item>
<acun:dropdown.item>CSV</acun:dropdown.item>
</acun:dropdown>List group
Kenarlıklı, satırları çizgiyle ayrılmış liste. Satırlar düz metin, bağlantı, aktif ya da pasif olabilir; ikon ve rozetle zenginleştirilebilir.
<acun:list-group>
<acun:list-group.item>İstanbul Merkez Depo</acun:list-group.item>
<acun:list-group.item>Ankara Depo</acun:list-group.item>
<acun:list-group.item>İzmir Depo</acun:list-group.item>
</acun:list-group>Modal
Sayfanın üstünde açılan, arkasını karartan pencere. Kısa formlar, ayrıntı görünümleri ve kullanıcının dikkatini bir işe toplaması gereken durumlar için kullanılır; aynı anda yalnızca bir modal açık kalır.
<acun:modal.trigger name="catalog-customer"><acun:button>Müşteri özetini aç</acun:button></acun:modal.trigger>
<acun:modal name="catalog-customer" title="Müşteri özeti">
<dl class="space-y-3 text-sm">
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Müşteri</dt><dd>Ayşe Yılmaz</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Üyelik</dt><dd>Premium</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Son sipariş</dt><dd>12 Eylül 2026</dd></div>
</dl>
</acun:modal>Onay penceresi
Silme gibi geri alınamaz bir işlemden önce kullanıcıya son kez soran dar pencere. acun:modal üzerine kuruludur; açma, kapatma ve odak davranışı aynıdır.
<acun:modal.trigger name="catalog-product-delete"><acun:button variant="outline-danger">Ürünü sil</acun:button></acun:modal.trigger>
<acun:confirmation-dialog
name="catalog-product-delete"
title="Ürünü sil"
description="'Kablosuz kulaklık' ürününü silmek istediğinize emin misiniz? Bu işlem geri alınamaz."
confirm-text="Sil"
/>Çekmece
Ekranın yanından kayarak açılan panel. Kaydın ayrıntısı, kısa bir form ya da liste sayfalarının filtreleri gibi sayfadan ayrılmadan bakılacak içerik için kullanılır.
<acun:drawer.trigger name="catalog-details"><acun:button variant="white">Müşteri özetini aç</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-details" title="Müşteri özeti">
<dl class="space-y-3 text-sm">
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Üyelik</dt><dd>Premium</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Sipariş sayısı</dt><dd>5</dd></div>
</dl>
<acun:slot:footer>
<acun:drawer.close><acun:button variant="white">Kapat</acun:button></acun:drawer.close>
<acun:button>Düzenle</acun:button>
</acun:slot:footer>
</acun:drawer>Sayfalama
Laravel sayfalayıcısı için hazır görünüm: solda "Gösteriliyor 1 - 6 / 48 sonuç" özeti, sağda önceki/sonraki ve sayfa numaraları. Livewire bileşenlerinde sayfa yenilemeden, Livewire olmadan normal bağlantılarla çalışır.
İlerleme
Bir işin ne kadarının tamamlandığını yatay bir çubukla gösterir. Değer sunucudan sabit gelebilir ya da tarayıcıda değişen bir Alpine ifadesine bağlanabilir.
<div class="space-y-1.5">
<div class="flex justify-between text-sm">
<span class="font-medium text-gray-900 dark:text-zinc-100">Satış hedefi</span>
<span class="tabular-nums">68%</span>
</div>
<acun:progress :value="68" label="Satış hedefi" />
</div>Spinner
Bir işlem sürerken yükleniyor durumunu gösterir. Düğmelerde acun:button'ın loading prop'unu, bir alanı kilitlemek için acun:loading-overlay'i kullanın; spinner geri kalan yerler içindir.
<div class="flex flex-wrap items-center gap-6">
<acun:spinner size="sm" />
<acun:spinner />
<acun:spinner size="lg" />
</div>Sekmeler
İçeriği sekmelere bölerek aynı alanda gösterir. Alt çizgili ve dolgulu iki görünümü vardır; sekme değişimi sayfayı yenilemez.
<acun:tabs :tabs="['genel' => 'Genel', 'siparis' => 'Siparişler', 'gecmis' => 'Geçmiş']">
<acun:tab-panel value="genel"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium üye · Kadıköy, İstanbul</p></acun:tab-panel>
<acun:tab-panel value="siparis"><p class="text-sm text-gray-600 dark:text-zinc-400">Son sipariş: 12 Eylül 2026</p></acun:tab-panel>
<acun:tab-panel value="gecmis"><p class="text-sm text-gray-600 dark:text-zinc-400">2026'da 9 sipariş, 1 iade.</p></acun:tab-panel>
</acun:tabs>Toast
Ekranın sağ altında birkaç saniye görünüp kendiliğinden kaybolan kısa bildirim. Kayıt, silme ya da aktarım gibi bir işlemin sonucunu sayfayı bozmadan haber verir; hazır düzenlerin hepsinde kurulu gelir.
<div class="flex flex-wrap gap-2" x-data>
<acun:button variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Ürün kaydedildi.' })">Başarılı</acun:button>
<acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'error', message: 'Kayıt silinemedi.' })">Hata</acun:button>
<acun:button variant="warning" x-on:click="$dispatch('toast', { type: 'warning', message: '2 kayıt yetki nedeniyle atlandı.' })">Uyarı</acun:button>
<acun:button variant="white" x-on:click="$dispatch('toast', { message: 'Aktarım kuyruğa alındı.' })">Bilgi</acun:button>
</div>İpucu
Bir öğenin üzerine fareyle gelince ya da klavyeyle odaklanınca beliren kısa açıklama. İkon düğmelerinin ne yaptığını ya da kısaltılmış bir değerin tamamını göstermek için kullanılır.
<div class="py-6">
<acun:tooltip text="Müşterinin sipariş geçmişi">
<acun:button variant="white" size="sm">Geçmiş</acun:button>
</acun:tooltip>
</div>Popover
Tetikleyiciye tıklanınca açılan, isteğe bağlı başlıklı bilgi balonu. Birkaç cümlelik açıklamalar için uygundur; tek satırlık ipuçlarında acun:tooltip kullanın.
<acun:popover title="İade kuralı">
<acun:slot:trigger><acun:button variant="white" size="sm">Neden iade edilemiyor?</acun:button></acun:slot:trigger>
Ürünler teslimattan sonraki 14 gün içinde iade edilebilir. Bu sipariş 12 Eylül'de teslim edildi.
</acun:popover>Sayfa başlığı
Sayfanın en üstünde yol haritasını, başlığı, kısa açıklamayı ve sağdaki işlem düğmelerini bir arada gösterir. Liste, form ve ayrıntı sayfalarının hepsinde aynı üst düzeni sağlar.
<acun:page-header title="Siparişler" description="Kadıköy deposundan çıkan 148 siparişin kargo durumu." />Tanım listesi
Bir kaydın bilgilerini etiket ve değer çiftleri halinde alt alta listeler. Sipariş, lisans ya da müşteri ayrıntıları gibi salt okunur özetler için uygundur.
<acun:description-list :items="[
'Müşteri adı' => 'Ayşe Yılmaz',
'Müşteri no' => 'MÜŞ-10482',
'Üyelik' => 'Premium',
'Sipariş sayısı' => '5',
'Adres' => 'Moda Cad. No: 14, Kadıköy / İstanbul',
]" />Avatar
Bir kişiyi ya da kaydı küçük, yuvarlak bir görselle temsil eder. Fotoğraf yoksa addan baş harfler üretilir; renk, durum noktası ve üst üste binen grup görünümü desteklenir.
<div class="flex flex-wrap items-center gap-4">
<acun:avatar name="Ayşe Yılmaz" size="xs" />
<acun:avatar name="Ayşe Yılmaz" size="sm" />
<acun:avatar name="Ayşe Yılmaz" />
<acun:avatar name="Ayşe Yılmaz" size="lg" />
<acun:avatar name="Ayşe Yılmaz" size="xl" />
</div>Yükleme örtüsü
Bir işlem sürerken alanın üstünü yarı saydam bir katmanla örter ve tıklanmasını engeller. Bir Livewire işlemine ya da bir Alpine ifadesine bağlanır.
<div class="relative rounded-sm border border-gray-200 p-6 dark:border-zinc-700" x-data="{ locked: false }">
<p class="text-sm text-gray-600 dark:text-zinc-400">Rapor hazırlanırken bu alan kilitlenir.</p>
<acun:button class="mt-4" size="sm" x-on:click="locked = true; setTimeout(() => locked = false, 2000)">Raporu hazırla</acun:button>
<acun:loading-overlay show="locked" label="Hazırlanıyor" />
</div>Sürükle-bırak
Öğeleri sürükleyip bırakarak sıralamayı sağlar. Livewire 4 ile gelen Alpine Sort eklentisini kullanır; handler verilirse yeni sıra sunucuya gönderilir.
<acun:sortable>
<acun:sortable.item key="1">Elektronik</acun:sortable.item>
<acun:sortable.item key="2">Ev ve yaşam</acun:sortable.item>
<acun:sortable.item key="3">Giyim</acun:sortable.item>
<acun:sortable.item key="4">Kozmetik</acun:sortable.item>
</acun:sortable>Medya oynatıcı
Video ve ses dosyalarını, tarayıcıdan tarayıcıya değişen yerleşik denetimler yerine temaya uyan tek bir denetim çubuğuyla oynatır: oynat/duraklat, konum çubuğu, süre, ses, hız ve tam ekran. JavaScript çalışmazsa tarayıcının kendi denetimleri görünür, dosya yine oynatılabilir.
<acun:media-player
src="../assets/media/sample-video.mp4"
poster="../assets/media/sample-poster.jpg"
title="Tanıtım videosu"
/>Kaydırma alanı
Uzun ya da geniş içeriği sınırlı bir kutunun içinde kaydırır. Kaydırma çubuğu ince çizilir ve açık/koyu temaya uyar; ayrı bir JavaScript kütüphanesi gerekmez. İstenirse gizli içerik kalan kenarlar yumuşakça soluklaşır.
<acun:scroll-area max-height="15rem" label="Son satılan ürünler" class="rounded-sm border border-gray-200 dark:border-zinc-700">
<ul class="divide-y divide-gray-100 dark:divide-zinc-800">
@foreach (['Kablosuz kulaklık', 'Mekanik klavye', 'USB-C şarj aleti', '27 inç monitör', 'Ergonomik sandalye', 'Laptop standı', 'Web kamerası', 'Harici SSD 1 TB', 'Bluetooth hoparlör', 'Akıllı saat'] as $urun)
<li class="flex items-center justify-between gap-4 px-4 py-2.5 text-sm">
<span class="text-gray-900 dark:text-zinc-100">{{ $urun }}</span>
<span class="text-xs text-gray-500 dark:text-zinc-400">{{ 20 - $loop->index }} Eylül</span>
</li>
@endforeach
</ul>
</acun:scroll-area>Yıldız puanı
Yıldızlarla puan vermeyi ya da mevcut bir puanı göstermeyi sağlar. Düz bir formda name ile, Livewire'da wire:model, Alpine'de x-model ile kullanılır; salt okunur modda yalnızca gösterim yapar.
Ayırıcı
İçerik bloklarını yatay bir çizgiyle ayırır. İçine metin konursa çizginin ortasında, başında ya da sonunda gösterilir.
<p class="text-sm text-gray-600 dark:text-zinc-400">Müşteri bilgileri güncellendi.</p>
<acun:divider class="my-4" />
<p class="text-sm text-gray-600 dark:text-zinc-400">Sıradaki fatura: 14 Ekim 2026.</p>Zaman çizelgesi
Bir kaydın başından geçenleri tarih sırasıyla, dikey bir çizgi üzerinde gösterir. Sipariş geçmişi, destek talebi süreci ya da işlem kayıtları için uygundur.
<acun:timeline>
<acun:timeline.item title="Teslim edildi" time="12.09.2026 14:32">Paket alıcıya kapıda teslim edildi.</acun:timeline.item>
<acun:timeline.item title="Kargoya verildi" time="11.09.2026 09:00">Paket Kadıköy deposundan yola çıktı.</acun:timeline.item>
<acun:timeline.item title="Sipariş oluşturuldu" time="10.09.2026 16:47" />
</acun:timeline>Tur
Kullanıcıyı sayfanın önemli bölümlerinde adım adım gezdirir. Her adımda bir öğe öne çıkar, ekranın geri kalanı kararır ve öğenin yanında başlık, açıklama, adım sayacı ile Geri / İleri düğmelerini taşıyan küçük bir balon açılır. İlk girişte panelin tanıtımı ya da yeni bir özelliğin gösterilmesi için uygundur.
<acun:tour name="siparis-turu" :steps="[
['target' => '#siparis-arama', 'title' => 'Sipariş arama', 'text' => 'Siparişleri numara, müşteri adı ya da telefonla bulun.'],
['target' => '#siparis-ekle', 'title' => 'Yeni sipariş', 'text' => 'Telefonla gelen bir siparişi buradan kaydedin.'],
['target' => '#siparis-ozet', 'title' => 'Aylık özet', 'text' => 'Bu ayki kargoları ve bekleyen iadeleri buradan izleyin.', 'placement' => 'top'],
]">
<acun:button variant="white" x-on:click="start()">Turu başlat</acun:button>
</acun:tour>
<div class="mt-6 space-y-4">
<div class="flex flex-wrap items-center gap-3">
<div id="siparis-arama" class="w-64"><acun:input name="ara" placeholder="Sipariş ara…" /></div>
<acun:button id="siparis-ekle">Yeni sipariş</acun:button>
</div>
<div id="siparis-ozet" class="grid grid-cols-2 gap-3">
<acun:stat-card label="Bu ay kargolanan" value="148" />
<acun:stat-card label="Bekleyen iade" value="23" />
</div>
</div>Ağaç görünümü
Kategori › alt kategori › ürün grubu gibi iç içe verileri açılıp kapanan dallar hâlinde gösterir. Bütün yapı tek bir items dizisiyle verilir.
<acun:tree :items="[
['label' => 'Elektronik', 'children' => [
['label' => 'Bilgisayar', 'children' => [['label' => 'Dizüstü'], ['label' => 'Masaüstü']]],
['label' => 'Telefon', 'children' => [['label' => 'Akıllı telefon']]],
]],
['label' => 'Giyim', 'children' => [['label' => 'Kadın']]],
]" />Diğer
Küçük yardımcı bileşenler: acun:copy-button bir metni tek tıkla panoya kopyalar, acun:kbd klavye tuşlarını ve kısayolları metin içinde tuş görünümünde gösterir.
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-sm text-gray-900 dark:text-zinc-100">SİP-2026-004817</span>
<acun:copy-button text="SİP-2026-004817" size="sm" />
<acun:copy-button text="SİP-2026-004817" variant="soft" size="sm" label="Sipariş numarasını kopyala" />
</div>İskelet
İçerik yüklenirken onun yerinde duran, hafifçe yanıp sönen gri yer tutucu. Gerçek içeriğin biçimini taklit ederek sayfanın yüklenince zıplamasını önler.
<div class="flex items-center gap-4">
<acun:skeleton class="h-16 w-24" />
<acun:skeleton variant="circle" class="size-12" />
<div class="flex-1 space-y-2">
<acun:skeleton variant="text" />
<acun:skeleton variant="text" class="w-2/3" />
</div>
</div>Boş durum
Liste boşken ya da arama sonuç vermediğinde tablonun yerine gösterilen kutu. Kullanıcıya neden bir şey görmediğini söyler ve mümkünse bir sonraki adımı önerir.
<acun:empty-state title="Henüz sipariş yok" description="Bu mağazada bu ay için kaydedilmiş sipariş bulunmuyor." />Hap işlem
Renkli yuvarlak rozetli ve etiketli işlem düğmesi. Mobil ekranlarda birkaç hızlı işlemi yan yana, eşit genişlikte sunmak için kullanılır.
<div class="flex flex-wrap">
<acun:pill-action label="Onayla" variant="success"><acun:icon name="check" size="3.5" /></acun:pill-action>
<acun:pill-action label="Beklet" variant="warning"><acun:icon name="exclamation-triangle" size="3.5" /></acun:pill-action>
<acun:pill-action label="Adres"><acun:icon name="map-pin" size="3.5" /></acun:pill-action>
<acun:pill-action label="İptal" variant="danger"><acun:icon name="x-mark" size="3.5" /></acun:pill-action>
</div>Metin alanı
Etiketli metin alanı. Alan adı ve id wire:model değerinden türetilir, doğrulama hatası $errors içinden kendiliğinden gösterilir; yüzen etiket ve şifre göster/gizle seçenekleri vardır.
<div class="space-y-4">
<acun:input wire:model="urun_adi" label="Ürün adı" placeholder="Örn. Kablosuz kulaklık" />
<acun:input name="ozel_kod" label="Özel kod" value="SKU-01" />
</div>Input grubu
Metin alanının soluna ya da sağına sabit bir ek koyar: ülke kodu, para birimi, birim, alan adı ya da ikon. Etiket, ipucu ve doğrulama hatası acun:input ile aynı çalışır.
<div class="space-y-4">
<acun:input-group name="telefon" label="Telefon" prefix="+90" placeholder="5xx xxx xx xx" />
<acun:input-group name="fiyat" label="Ürün fiyatı" suffix="₺" placeholder="0,00" inputmode="decimal" />
<acun:input-group name="site" label="Web adresi" prefix="https://" suffix=".com" />
</div>Arama formu
Arama kutusu: büyüteç ikonu, yazınca beliren temizle düğmesi, klavye kısayolu ve isteğe bağlı birleşik Ara düğmesi. Sayfayı yenileyen bir GET formu ya da Livewire ile canlı arama olarak kullanılır.
Özel seçenekler
Radio ya da checkbox'ı başlık, açıklama ve ikon içeren tıklanabilir bir karta dönüştürür. Az sayıda ve açıklama gerektiren seçenekler için uygundur.
<div class="grid gap-3 md:grid-cols-3">
<acun:option-card name="fatura_donemi" value="aylik" title="Aylık" description="Her ay yenilenir" />
<acun:option-card name="fatura_donemi" value="yillik" title="Yıllık" description="İki ay ücretsiz" checked />
<acun:option-card name="fatura_donemi" value="omur_boyu" title="Ömür boyu" description="Tek seferlik ödeme" />
</div>Dosya yükleme
Tek ve çoklu dosya yükleme: sürükle-bırak alanı, önizlemeli dosya listesi, dosya başına ilerleme, iptal ve yeniden deneme, düzenleme formları için kayıtlı dosyalar, sıralama, avatar ve kompakt görünümler. Livewire bileşeninde de, Livewire olmayan klasik bir formda da çalışır.
<acun:file-upload model="kimlik_belgesi" label="Kimlik belgesi" accept=".pdf,image/*" hint="Kimlik kartının ön yüzü · PDF ya da görsel" />Tarih seçici
Tarayıcının kendi tarih ve saat seçicisini panel stiliyle gösterir. acun:input üzerine kurulduğu için etiket, ipucu ve hata gösterimi aynıdır. Tarih aralığı seçmek için flatpickr tabanlı uiDateRangePicker kullanılır.
<acun:date-picker name="teslimat_tarihi" label="Teslimat tarihi" value="2026-10-07" hint="Müşteriye e-postayla bildirilen gün." />Seçim kutusu
Etiketli seçim kutusu. Seçenekler options dizisinden ya da slot'tan gelir; etiket, ipucu ve hata davranışı acun:input ile aynıdır.
<acun:select wire:model="durum" label="Durum" :options="['1' => 'Aktif', '0' => 'Pasif']" placeholder="Seçiniz" />Combobox
Uzun listeler için aranabilir seçim kutusu: tek ya da çoklu seçim, silinebilir çipler, açıklamalı ve gruplu seçenekler, Livewire metodundan ya da bir JSON adresinden arama ve listede olmayan değeri ekleme. Arama büyük/küçük harfe ve Türkçe harflere duyarsızdır; klavye ve ekran okuyucularla tam kullanılır.
<acun:combobox name="sube_id" label="Şube" value="2" :options="[
1 => 'Kadıköy Şubesi', 2 => 'Beşiktaş Şubesi', 3 => 'Üsküdar Şubesi',
4 => 'Çankaya Şubesi', 5 => 'Karşıyaka Şubesi', 6 => 'Nilüfer Şubesi', 7 => 'Ataşehir Şubesi',
8 => 'Şişli Şubesi', 9 => 'Çamlıca Şubesi', 10 => 'Iğdır Şubesi',
]" />Etiket girişi
acun:tag-input serbest ya da listeden etiket girişi sağlar. Öneriler Türkçe harf kurallarına göre büyük/küçük harf ayırmadan aranır. Uzun bir listeden bir ya da birden çok değer seçtirmek için Combobox sayfasındaki acun:combobox'ı kullanın.
<acun:tag-input name="etiketler" label="Etiketler" :value="['öncelikli', 'toptan']" />Kaydırıcı
Bir sayı aralığından değer seçtiren kaydırıcı. Etiket verildiğinde seçili değer, birimiyle birlikte etiketin sağında anlık olarak gösterilir.
Switch
Bir ayarı tek tıklamayla açıp kapatan anahtar. Arka planda role="switch" taşıyan bir checkbox'tır; anında etkili olan açık/kapalı ayarlar için kullanılır.
<acun:switch name="sw_bildirim" label="Sipariş bildirimleri" checked />
<acun:switch name="sw_bulten">E-posta bülteni</acun:switch>Onay ve seçenek
Marka renginde onay kutusu (acun:checkbox) ve seçenek düğmesi (acun:radio). Etiket bileşenin içinde çizilir; id alan adı ve değerden türetildiği için etiket her zaman kutuya bağlıdır.
<div class="flex flex-col gap-3">
<acun:checkbox name="eposta_bildirimi" label="E-posta bildirimi" checked />
<acun:checkbox name="sms_bildirimi" label="SMS bildirimi" />
</div>Çok satırlı alan
Çok satırlı metin alanı. Not, adres ve açıklama gibi uzun girişler içindir; etiket, ipucu, yüzen etiket ve hata davranışı acun:input ile aynıdır.
<acun:textarea wire:model="not" label="Not" rows="3" placeholder="Depo ekibine iletilecek not" />Doğrulama kodu
SMS ya da e-postayla gelen tek kullanımlık kod için her haneye ayrı bir kutu gösterir. Kutular yalnızca rakam kabul eder; yapıştırılan kod kutulara kendiliğinden dağıtılır.
Form doğrulama
Form alanları Laravel doğrulama hatalarını $errors üzerinden kendileri gösterir: alan adına ait bir hata varsa çerçeve kırmızıya döner ve mesaj alanın altında çıkar. Ek kod gerekmez.
<form class="grid gap-4 md:grid-cols-2">
<acun:input wire:model="ad" label="Müşteri adı" required />
<acun:input-group wire:model="telefon" label="Telefon" prefix="+90" value="532 11" />
<acun:select wire:model="grup" label="Müşteri grubu" :options="['1' => 'Bireysel']" placeholder="Seçiniz" />
<acun:input-group wire:model="limit" label="Kredi limiti" suffix="₺" value="0" />
<div class="md:col-span-2"><acun:button type="submit">Kaydet</acun:button></div>
</form>Form sihirbazı
Uzun bir formu adımlara böler. Adımlar üstte listelenir; tamamlanan adımlar onay işaretiyle gösterilir ve tıklanarak geri dönülebilir, sonraki adımlara ise yalnızca düğmelerle geçilir.
<acun:stepper :steps="['proje' => 'Proje', 'ekip' => 'Ekip', 'onay' => 'Onay']">
<acun:stepper.step name="proje" class="grid gap-4 md:grid-cols-2">
<acun:input name="t_ad" label="Proje adı" />
<acun:select name="t_plan" label="Plan" :options="['1' => 'Başlangıç', '2' => 'Profesyonel']" />
</acun:stepper.step>
<acun:stepper.step name="ekip" class="grid gap-4 md:grid-cols-2">
<acun:input name="t_kisi" label="Kişi sayısı" type="number" />
<acun:input name="t_tel" label="Telefon" />
</acun:stepper.step>
<acun:stepper.step name="onay">
<acun:alert variant="success">Bilgiler hazır. Kaydet'e basınca proje oluşturulur.</acun:alert>
</acun:stepper.step>
<div class="mt-6 flex justify-between">
<acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Geri</acun:button>
<acun:button x-show="! isLast" x-on:click="next()">İleri</acun:button>
<acun:button x-show="isLast" x-cloak variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Proje kaydedildi.' })">Kaydet</acun:button>
</div>
</acun:stepper>Dikey form
Etiketlerin alanların üstünde durduğu standart form düzeni. Ayrı bir bileşen yoktur; alanlar Tailwind boşluk ve ızgara sınıflarıyla dizilir.
<form class="space-y-4">
<acun:input name="iletisim_ad" label="Ad soyad" />
<acun:input name="iletisim_eposta" type="email" label="E-posta" />
<acun:select name="iletisim_konu" label="Konu" :options="['siparis' => 'Sipariş', 'fatura' => 'Fatura', 'diger' => 'Diğer']" placeholder="Seçiniz" />
<acun:textarea name="iletisim_mesaj" label="Mesaj" rows="3" />
<acun:button type="submit" class="w-full">Gönder</acun:button>
</form>Yatay form
Etiketlerin solda, alanların sağda durduğu düzen. Ayar ve detay ekranlarında etiketleri tek sütunda taramayı kolaylaştırır; küçük ekranda etiketler yine alanların üstüne iner.
<acun:card title="Ürün bilgileri">
<form class="space-y-4">
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="urun_ad" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Ürün adı</label>
<acun:input name="urun_ad" value="Kablosuz kulaklık" />
</div>
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="urun_kod" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Stok kodu</label>
<acun:input name="urun_kod" value="KLK-02" />
</div>
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="urun_kategori" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Kategori</label>
<acun:select name="urun_kategori" :options="['1' => 'Elektronik', '2' => 'Aksesuar']" />
</div>
<div class="grid gap-2 sm:grid-cols-[10rem_1fr]">
<span></span>
<div class="flex gap-2"><acun:button type="submit">Kaydet</acun:button><acun:button variant="white">Vazgeç</acun:button></div>
</div>
</form>
</acun:card>Yapışkan işlemler
Uzun formlarda Kaydet ve Vazgeç düğmelerini içeren çubuk, sayfa kaydırılırken görünür kalır. Tailwind'in sticky sınıflarıyla kurulur; ayrı bir bileşen gerekmez.
<div class="max-h-96 overflow-y-auto rounded-sm bg-white shadow-sm dark:bg-zinc-900">
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white/90 px-5 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
<h3 class="text-sm font-semibold text-gray-900 dark:text-zinc-100">Genel ayarlar</h3>
<div class="flex gap-2"><acun:button size="sm" variant="white">Vazgeç</acun:button><acun:button size="sm">Kaydet</acun:button></div>
</div>
<div class="grid gap-4 p-5 md:grid-cols-2">
@foreach (['Şirket adı', 'Kısa ad', 'İl', 'İlçe', 'Telefon', 'E-posta', 'Web adresi', 'Vergi no', 'Yetkili', 'Yetkili telefonu'] as $i => $etiket)
<acun:input name="alan{{ $i }}" :label="$etiket" />
@endforeach
</div>
</div>Form koruması
Kaydedilmemiş değişiklik koruması olan form. dirty-check açıkken alanlar değiştiyse sayfadan ayrılmak onay ister: tarayıcı çıkışlarında tarayıcının kendi uyarısı, wire:navigate geçişlerinde acun:form-guard-dialog penceresi.
<acun:form dirty-check class="space-y-4"
x-data="{ degisti: false }"
x-on:input="setTimeout(() => degisti = AcunUI.pro.formGuard.dirty)"
x-on:change="setTimeout(() => degisti = AcunUI.pro.formGuard.dirty)">
<acun:input name="musteri_adi" label="Müşteri adı" value="Ayşe Yılmaz" />
<acun:checkbox name="aktif" label="Aktif müşteri" checked />
<p class="text-sm text-gray-500 dark:text-zinc-400" x-text="degisti ? 'Kaydedilmemiş değişiklik var' : 'Değişiklik yok'"></p>
</acun:form>Tablo
Veri tabloları için kart görünümlü, yatay kaydırılabilen kap ve hazır tablo stilleri. Kendi table etiketinizi yazarsınız; ui-table sınıfı başlık, hücre, satır ve toplam satırı görünümünü verir.
<acun:table>
<table class="ui-table">
<thead>
<tr><th>Müşteri</th><th>Şehir</th><th>Son sipariş</th></tr>
</thead>
<tbody>
<tr><td>Ayşe Yılmaz</td><td>İstanbul</td><td>12.09.2026</td></tr>
<tr><td>Mehmet Kaya</td><td>Ankara</td><td>10.09.2026</td></tr>
<tr><td>Zeynep Arslan</td><td>İzmir</td><td>08.09.2026</td></tr>
</tbody>
</table>
</acun:table>DataTable motoru
Kolon, filtre ve işlemleri bir PHP sınıfında tanımlanan hazır Livewire tablosu. Arama, filtre, sıralama, seçim ve sayfalama sunucuda çalışır; tarayıcıya yalnızca görünen sayfa gider. Ayrıntılı kılavuz: DataTable.
use Acun\Ui\DataTable\DataTable;
final class OrdersTable extends DataTable
{
public string $title = 'Siparişler';
protected function query(): Builder
{
return Order::query()->visibleTo(auth()->user())->select(['id', 'number', 'customer_name', 'is_paid']);
}
protected function columns(): array
{
return [
Column::make('Sipariş no', 'number')->searchable()->sortable(),
Column::make('Müşteri', 'customer_name')->searchable(SearchMode::Contains)->sortable(),
Column::make('Ödendi', 'is_paid')->boolean(),
];
}
protected function authorizeTable(): void
{
$this->authorize('viewAny', Order::class);
}
}Liste sayfası
Panelin liste sayfalarının tamamı: araç çubuğu, filtre düğmesi, toplu seçim çubuğu, sıralanabilir tablo ve sayfalama. Görünüm Acun UI bileşenlerinden, davranış (arama, sıralama, seçim, sayfalama) WithListing trait'inden gelir.
<div class="space-y-4">
<acun:list-toolbar>
<acun:search name="liste_arama" placeholder="Ürün adı veya stok kodu" />
<acun:slot:actions>
<acun:filter-button drawer="catalog-listing-filters" :count="2" />
<acun:button>Yeni Ürün</acun:button>
</acun:slot:actions>
</acun:list-toolbar>
<acun:selection-bar :count="2" clear-action="clearSelection">
<acun:button variant="white" size="sm">Aktifleştir</acun:button>
<acun:button variant="danger" size="sm">Sil</acun:button>
</acun:selection-bar>
<acun:table>
<table class="ui-table">
<thead>
<tr>
<th class="w-10"><acun:checkbox id="liste-tumu" aria-label="Tümünü seç" /></th>
<acun:sortable-th field="ad" sort-field="ad" sort-direction="asc">Ürün Adı</acun:sortable-th>
<acun:sortable-th field="stok_kodu" sort-field="ad" sort-direction="asc">Stok Kodu</acun:sortable-th>
<th class="text-center">Stok</th>
<th>Durum</th>
</tr>
</thead>
<tbody>
<tr><td><acun:checkbox id="liste-1" checked /></td><td class="font-medium text-gray-900 dark:text-zinc-100">Kablosuz kulaklık</td><td>WH-01</td><td class="text-center tabular-nums">312</td><td><acun:badge variant="success">Aktif</acun:badge></td></tr>
<tr><td><acun:checkbox id="liste-2" checked /></td><td class="font-medium text-gray-900 dark:text-zinc-100">Mekanik klavye</td><td>MK-04</td><td class="text-center tabular-nums">148</td><td><acun:badge variant="success">Aktif</acun:badge></td></tr>
<tr><td><acun:checkbox id="liste-3" /></td><td class="font-medium text-gray-900 dark:text-zinc-100">USB-C şarj aleti</td><td>UC-02</td><td class="text-center tabular-nums">96</td><td><acun:badge variant="danger">Pasif</acun:badge></td></tr>
</tbody>
</table>
</acun:table>
{{ $examplePaginator->links('acun-ui::components.ui.pagination') }}
</div>
<acun:drawer name="catalog-listing-filters" docked title="Filtreler" compact>
<acun:select name="liste_durum" :options="['' => 'Tüm Durumlar', '1' => 'Aktif', '0' => 'Pasif']" />
</acun:drawer>Grafikler
ApexCharts ile çizilen grafik. options dizisi ApexCharts yapılandırmasının PHP karşılığıdır; karanlık temada eksen, ızgara ve ipucu renkleri kendiliğinden uyarlanır ve tema değişince grafik yeniden boyanır.
<acun:chart :options="[
'chart' => ['type' => 'area'],
'series' => [['name' => 'Sipariş', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]]],
'xaxis' => ['categories' => ['Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl']],
'colors' => ['primary'],
'stroke' => ['curve' => 'smooth', 'width' => 3],
'fill' => ['type' => 'gradient', 'gradient' => ['opacityFrom' => 0.4, 'opacityTo' => 0.05]],
'dataLabels' => ['enabled' => false],
]" />Harita
Leaflet ve OpenStreetMap ile harita. İşaretçi listesi gösterebilir ve tıklanan konumu bir Livewire özelliğine yazabilir.