186 lines
5 KiB
Markdown
186 lines
5 KiB
Markdown
# Theme Demo Komponenten
|
|
|
|
## 📋 Übersicht
|
|
|
|
Die Theme-Demo-Seite wurde in wiederverwendbare Livewire-Komponenten unterteilt, um bessere Wartbarkeit und Übersichtlichkeit zu gewährleisten.
|
|
|
|
## 🧩 Komponenten-Struktur
|
|
|
|
### 1. **ThemeInfo** (`app/Livewire/Web/Components/ThemeInfo.php`)
|
|
- **Zweck:** Zeigt aktuelle Domain-Konfiguration und Theme-Details
|
|
- **Features:**
|
|
- Domain-Name und Theme-Informationen
|
|
- Primär- und Sekundärfarben mit Farbvorschau
|
|
- Schriftarten-Informationen
|
|
- URL-Konfiguration
|
|
|
|
### 2. **LogoDemo** (`app/Livewire/Web/Components/LogoDemo.php`)
|
|
- **Zweck:** Demonstriert Logo-Varianten für das aktuelle Theme
|
|
- **Features:**
|
|
- Positives Logo auf hellem Hintergrund
|
|
- Negatives Logo auf dunklem Hintergrund
|
|
- Automatische Logo-Auswahl basierend auf Theme
|
|
|
|
### 3. **ColorDemo** (`app/Livewire/Web/Components/ColorDemo.php`)
|
|
- **Zweck:** Zeigt die Hauptfarben des aktuellen Themes
|
|
- **Features:**
|
|
- Primary-Farbe mit Hex-Code
|
|
- Secondary-Farbe mit Hex-Code
|
|
- Accent-Farbe (immer Neutral)
|
|
- Farbvorschau-Karten
|
|
|
|
### 4. **ButtonDemo** (`app/Livewire/Web/Components/ButtonDemo.php`)
|
|
- **Zweck:** Demonstriert Button-Styles und Hover-Effekte
|
|
- **Features:**
|
|
- Primary, Secondary und Accent Buttons
|
|
- Hover-Effekte mit Übergängen
|
|
- Theme-spezifische Farbwechsel
|
|
|
|
### 5. **ThemeSwitcher** (`app/Livewire/Web/Components/ThemeSwitcher.php`)
|
|
- **Zweck:** Bietet verschiedene Wege zum Theme-Switching
|
|
- **Features:**
|
|
- Domain-basierte Links
|
|
- URL-Parameter-Links
|
|
- Pfad-basierte Links für lokale Entwicklung
|
|
|
|
### 6. **DemoSection** (`app/Livewire/Web/Components/DemoSection.php`)
|
|
- **Zweck:** Wiederverwendbarer Container für Demo-Bereiche
|
|
- **Features:**
|
|
- Einheitliches Layout
|
|
- Titel und Beschreibung
|
|
- Flexible Inhalte
|
|
|
|
## 🎯 Verwendung
|
|
|
|
### Haupt-Theme-Demo-View
|
|
```blade
|
|
@extends('web.layouts.web-master')
|
|
|
|
@section('content')
|
|
<div class="min-h-screen bg-background">
|
|
<livewire:web.components.header />
|
|
|
|
<main class="section-padding">
|
|
<div class="container-padding">
|
|
<livewire:web.components.theme-info />
|
|
<livewire:web.components.logo-demo />
|
|
<livewire:web.components.color-demo />
|
|
<livewire:web.components.button-demo />
|
|
<livewire:web.components.theme-switcher />
|
|
</div>
|
|
</main>
|
|
|
|
<livewire:web.components.footer />
|
|
</div>
|
|
@endsection
|
|
```
|
|
|
|
### Einzelne Komponenten verwenden
|
|
```blade
|
|
<!-- Nur Logo-Demo -->
|
|
<livewire:web.components.logo-demo />
|
|
|
|
<!-- Nur Farb-Demo -->
|
|
<livewire:web.components.color-demo />
|
|
|
|
<!-- Nur Button-Demo -->
|
|
<livewire:web.components.button-demo />
|
|
```
|
|
|
|
## 🔧 Wartbarkeit
|
|
|
|
### Vorteile der Komponenten-Struktur:
|
|
|
|
1. **Modularität:** Jede Komponente hat einen spezifischen Zweck
|
|
2. **Wiederverwendbarkeit:** Komponenten können in anderen Views verwendet werden
|
|
3. **Wartbarkeit:** Änderungen an einer Komponente betreffen nur diese
|
|
4. **Testbarkeit:** Jede Komponente kann einzeln getestet werden
|
|
5. **Übersichtlichkeit:** Haupt-View ist sehr sauber und lesbar
|
|
|
|
### Datei-Struktur:
|
|
```
|
|
app/Livewire/Web/Components/
|
|
├── ThemeInfo.php
|
|
├── LogoDemo.php
|
|
├── ColorDemo.php
|
|
├── ButtonDemo.php
|
|
├── ThemeSwitcher.php
|
|
└── DemoSection.php
|
|
|
|
resources/views/livewire/web/components/
|
|
├── theme-info.blade.php
|
|
├── logo-demo.blade.php
|
|
├── color-demo.blade.php
|
|
├── button-demo.blade.php
|
|
├── theme-switcher.blade.php
|
|
└── demo-section.blade.php
|
|
```
|
|
|
|
## 🚀 Erweiterungen
|
|
|
|
### Neue Demo-Komponenten hinzufügen:
|
|
|
|
1. **Komponente erstellen:**
|
|
```php
|
|
// app/Livewire/Web/Components/NewDemo.php
|
|
<?php
|
|
namespace App\Livewire\Web\Components;
|
|
use Livewire\Component;
|
|
|
|
class NewDemo extends Component
|
|
{
|
|
public function render()
|
|
{
|
|
return view('livewire.web.components.new-demo');
|
|
}
|
|
}
|
|
```
|
|
|
|
2. **View erstellen:**
|
|
```blade
|
|
<!-- resources/views/livewire/web/components/new-demo.blade.php -->
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-section-title mb-8">Neue Demo</h2>
|
|
<!-- Demo-Inhalt -->
|
|
</div>
|
|
```
|
|
|
|
3. **In Haupt-View einbinden:**
|
|
```blade
|
|
<livewire:web.components.new-demo />
|
|
```
|
|
|
|
### DemoSection verwenden:
|
|
```blade
|
|
<livewire:web.components.demo-section
|
|
title="Meine Demo"
|
|
description="Beschreibung der Demo"
|
|
component="my-demo" />
|
|
```
|
|
|
|
## 📝 Best Practices
|
|
|
|
1. **Einheitliche Struktur:** Alle Demo-Komponenten folgen dem gleichen Layout-Pattern
|
|
2. **Responsive Design:** Alle Komponenten sind mobile-optimiert
|
|
3. **Accessibility:** Semantische HTML-Struktur und ARIA-Labels
|
|
4. **Performance:** Minimale JavaScript-Dependencies
|
|
5. **Theme-Konsistenz:** Verwendung der Theme-Helper für dynamische Inhalte
|
|
|
|
## 🔍 Debugging
|
|
|
|
### Komponenten einzeln testen:
|
|
```bash
|
|
# Spezifische Komponente testen
|
|
php artisan livewire:make ComponentName
|
|
|
|
# Komponenten-Status prüfen
|
|
php artisan livewire:list
|
|
```
|
|
|
|
### Theme-Helper testen:
|
|
```php
|
|
// In tinker
|
|
php artisan tinker
|
|
>>> \App\Helpers\ThemeHelper::getPrimaryColor()
|
|
>>> \App\Helpers\ThemeHelper::getLogoPath('positive')
|
|
```
|