TR
Türkçe English
Başlangıç

Mevcut projeye ekleme

Bu sayfa, Acun UI'yi temayı kullanmadan var olan bir Laravel projesine adım adım eklemeyi anlatır.

Temayla yeni bir projeye başlıyorsanız bu sayfaya ihtiyacınız yok; Hızlı başlangıç yeterlidir.

Gerekenler

  • Laravel 12 ya da 13; Livewire 4; Vite; Tailwind CSS 4
  • PHP 8.2 ya da üstü; derleme için Node.js 20.19+ ya da 22.12+
  • Yazı tipleri için Laravel 13 ve laravel-vite-plugin 3.1 ya da üstü
  • Temanın zip'i: gereken her şey zip'teki starter-kit klasöründedir

Adım adım

  1. Paketleri kopyalayın. Zip'teki starter-kit/packages/acun-ui klasörünü projenizin köküne aynı yolla kopyalayın. Proje kökünde:

    mkdir -p packages
cp -R /zipi-actiginiz-yer/acun-admin-1.1.0/starter-kit/packages/acun-ui packages/

  2. Paketleri Composer'a tanıtın. Starter kit'in composer.json dosyasından iki şeyi kendi composer.json dosyanıza kopyalayın: repositories bloğunu ve require içindeki acunsoft/* satırlarını. Depo bloğu şöyledir:

    "repositories": [
    { "type": "path", "url": "packages/acun-ui/acun-ui-core" },
    { "type": "path", "url": "packages/acun-ui/acun-ui-free" },
    { "type": "path", "url": "packages/acun-ui/acun-ui-pro" }
]

  3. PHP paketlerini kurun:

    composer update "acunsoft/*"

    Composer paketleri vendor/acunsoft/ altına bağlar ve servis sağlayıcılarını kendiliğinden tanır. acun:* bileşenleri hemen kullanılabilir.

  4. Derleme bağımlılıklarını ekleyin. package.json dosyanıza şu satırları ekleyin, sonra npm install çalıştırın:

    "dependencies": {
    "@acunsoft/acun-ui-core": "file:packages/acun-ui/acun-ui-core",
    "apexcharts": "^3.54.1",
    "flatpickr": "^4.6.13",
    "leaflet": "^1.9.4"
},
"devDependencies": {
    "@tailwindcss/forms": "^0.5.11"
}

    @acunsoft/acun-ui-core npm'den değil, kopyaladığınız klasörden gelir. ApexCharts, flatpickr ve Leaflet yalnızca grafik, tarih aralığı ve harita bileşenleri için gerekir.

  5. CSS'i bağlayın. resources/css/app.css dosyasında Tailwind'den sonra Acun UI'yi içe aktarın ve paketlerin görünümlerini Tailwind taramasına ekleyin:

    @import 'tailwindcss';
@plugin '@tailwindcss/forms';
@import '@acunsoft/acun-ui-core';
@import '../../vendor/acunsoft/acun-ui-pro/resources/css/acun-ui-pro.css';

@source '../../vendor/acunsoft/acun-ui-free/resources/views';
@source '../../vendor/acunsoft/acun-ui-pro/resources/views';

    @source satırları olmazsa bileşenlerin Tailwind sınıfları derlemeye girmez ve bileşenler stilsiz görünür. Dosyadaki kendi @source satırlarınızı silmeyin.

  6. Acun UI'nin JavaScript girişini oluşturun. Yeni bir resources/js/acun-ui.js dosyası:

    import '@acunsoft/acun-ui-core';
import '@acunsoft/acun-ui-pro';

    app.js sizin kodunuz için kalır ve Acun UI'yi içe aktarmaz. Alpine, Livewire ile gelir; ayrıca kurmanız gerekmez.

  7. Vite'ı ayarlayın. vite.config.js dosyanız şöyle olsun:

    import path from 'node:path';
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { bunny } from 'laravel-vite-plugin/fonts';
import tailwindcss from '@tailwindcss/vite';
import { woff2Only } from '@acunsoft/acun-ui-core/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/acun-ui.js', 'resources/js/app.js'],
            refresh: true,
            fonts: [
                bunny('Public Sans', { weights: [400, 500, 600, 700], subsets: ['latin', 'latin-ext'], preload: [{ weight: 400 }, { weight: 600 }] }),
                bunny('DM Mono', { weights: [400, 500], subsets: ['latin', 'latin-ext'], preload: false }),
            ],
        }),
        woff2Only(),
        tailwindcss(),
    ],
    resolve: {
        // PRO JavaScript'i npm'de değil, Composer paketindedir.
        alias: { '@acunsoft/acun-ui-pro': path.resolve(import.meta.dirname, 'vendor/acunsoft/acun-ui-pro/resources/js/index.js') },
    },
});

    input her sayfada yüklenen üç dosyadır. fonts temanın yazı tiplerini yükler: metin için Public Sans, kod ve sayılar için DM Mono. latin-ext alt kümesi Türkçe harfleri (ş, ğ, İ, ı) içerir. Ayrıntılar: Yazı tipleri.

  8. Düzeni oluşturun. resources/views/layouts/admin/vertical.blade.php:

    @php
    // Sekme başlığı: Blade sayfasının @section('title') değeri ya da Livewire sayfasının #[Title] değeri.
    $pageTitle = new \Illuminate\Support\HtmlString(View::yieldContent('title', __($title ?? 'Pano')));
@endphp

<acun:layout.sidebar customizer brand-name="Uygulamam" :home-url="route('dashboard')" :title="$pageTitle">
    <acun:slot:head>
        @acunFonts(['public-sans', 'dm-mono'])
        @vite(['resources/css/app.css', 'resources/js/acun-ui.js', 'resources/js/app.js'])
    </acun:slot:head>

    <acun:slot:nav><acun:menu menu="main" /></acun:slot:nav>

    @hasSection('content')
        @yield('content')
    @else
        {{ $slot ?? '' }}
    @endif
</acun:layout.sidebar>

    @acunFonts yazı tiplerinin etiketlerini, @vite CSS ve JavaScript'i yazar. Son blok düzeni hem Blade hem Livewire sayfalarında çalıştırır. Menünün üstünde uygulama adının baş harfi görünür. Kendi logonuz için düzene <acun:slot:logo><img src="/logo.svg" alt="Uygulamam" class="h-8"></acun:slot:logo> ekleyin.

  9. Menüyü yazın. resources/menu/main.json:

    {
    "menu": [
        { "section": "Genel" },
        { "title": "Pano", "icon": "home", "route": "dashboard" }
    ]
}

  10. İlk sayfayı yazın. resources/views/admin/dashboard.blade.php:

    @extends('layouts.admin.vertical')

@section('title', __('Pano'))

@section('content')
    <acun:page-header :title="__('Pano')" />
    <acun:card title="Hoş geldiniz">Acun UI kuruldu.</acun:card>
@endsection

  11. Rotayı ekleyin. routes/web.php:

    Route::view('/panel', 'admin.dashboard')->name('dashboard');

  12. Derleyin ve açın:

    npm run build

    Geliştirirken npm run build yerine npm run dev çalıştırın. Ardından tarayıcıda /panel adresini açın.

Livewire sayfası

Livewire tam sayfa bileşeni aynı düzeni özniteliklerle kullanır:

use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;

#[Layout('layouts.admin.vertical')]
#[Title('Pano')]
final class Dashboard extends Component
{
    // …
}

Düzen #[Title] değerini sekme başlığı olarak çevirir. Sayfa yazmanın ayrıntıları İlk sayfanız sayfasındadır.

Grafik, harita ve tarih aralığı

Bu bileşenler dış kütüphane kullanır; kütüphaneleri resources/js/app.js içinde Acun UI'ye kaydedersiniz. Hazır kodu Grafik, harita ve tarih aralığı bölümünden kopyalayın.

Bileşen etiketleri

Dokümandaki örnekler kısa yazımı kullanır: <acun:button>. Aynı bileşen Blade'in kendi bileşen yazımıyla da çağrılır. İkisi aynı prop'ları ve slot'ları alır, aynı HTML'i üretir:

<acun:button variant="danger">Sil</acun:button>
<x-ui.button variant="danger">Sil</x-ui.button>

<acun:card title="Özet">
    <acun:slot:actions><acun:badge>3</acun:badge></acun:slot>
    Gövde
</acun:card>
  • Adlandırılmış slot'lar <acun:slot:ad> ya da <acun:slot name="ad"> ile yazılır.
  • <acun:accordion.heading> gibi noktalı adlar ve PRO bileşenleri de aynı şekilde çalışır.
  • Editör eklentileri (otomatik tamamlama, tanıma git) yalnızca Blade'in kendi yazımını tanır. Bu desteğe ihtiyacınız varsa <x-ui.*> yazımını kullanın.
  • Kısa yazım yalnızca Acun UI bileşenleri içindir. Uygulamanızın kendi bileşenleri <x-…> ile çağrılmaya devam eder.

İsteğe bağlı yayınlar

Paketlerin ayar dosyasını ve görünümlerini uygulamanıza kopyalayıp değiştirebilirsiniz:

php artisan vendor:publish --tag=acun-ui-config      # config/acun-ui.php (düzen ve DataTable varsayılanları)
php artisan vendor:publish --tag=acun-ui-views       # resources/views/vendor/acun-ui (ör. sayfalama görünümü)
php artisan vendor:publish --tag=acun-ui-pro-views   # resources/views/vendor/acun-ui-pro (ör. DataTable parçaları)

Bir bileşenin görünümünü kalıcı olarak değiştirmek için dosyasını paketten uygulamanızın resources/views/components/ui/ klasörüne aynı adla kopyalayın. Laravel önce uygulamadaki kopyayı kullanır. Kopyalanan dosyalar paket güncellemelerini almaz. Çoğu durumda Özelleştirme sayfasındaki ayarlar yeterlidir.

Daha fazlası

  • CSS, JavaScript ve derleme: JavaScript katmanları, sayfaya özel kod, Vite olmadan yükleme, sorun giderme.
  • Yapılandırma: config/acun-ui.php ayarları.
  • Düzenler: yatay menü, giriş ve hata sayfaları için diğer düzenler.
  • Menü: JSON menünün bütün alanları.
Acun UIİnsanlar için tasarlandı.