485 lines
12 KiB
Markdown
485 lines
12 KiB
Markdown
# Komponenten-Dokumentation
|
|
|
|
Diese Dokumentation beschreibt alle wiederverwendbaren Blade-Komponenten für die Presseecho und Businessportal24 Themes.
|
|
|
|
## Inhaltsverzeichnis
|
|
1. [Layout-Komponenten](#layout-komponenten)
|
|
2. [Navigation-Komponenten](#navigation-komponenten)
|
|
3. [Content-Komponenten](#content-komponenten)
|
|
4. [Card-Komponenten](#card-komponenten)
|
|
5. [Verwendungsbeispiele](#verwendungsbeispiele)
|
|
|
|
---
|
|
|
|
## Layout-Komponenten
|
|
|
|
### Content-Layout
|
|
**Pfad:** `resources/views/components/web/content-layout.blade.php`
|
|
|
|
Hauptlayout für Unterseiten mit optionaler Sidebar.
|
|
|
|
**Props:**
|
|
- `$sidebar` (slot): Sidebar-Inhalt (optional)
|
|
- `$sidebarPosition` (string): Position der Sidebar - `'left'` oder `'right'` (default: `'right'`)
|
|
|
|
**Beispiel ohne Sidebar:**
|
|
```blade
|
|
<x-web.content-layout>
|
|
<article>
|
|
<!-- Ihr Content hier -->
|
|
</article>
|
|
</x-web.content-layout>
|
|
```
|
|
|
|
**Beispiel mit Sidebar:**
|
|
```blade
|
|
<x-web.content-layout>
|
|
<x-slot name="sidebar">
|
|
<x-web.sidebar-widget title="Filter">
|
|
<!-- Sidebar-Inhalte -->
|
|
</x-web.sidebar-widget>
|
|
</x-slot>
|
|
|
|
<article>
|
|
<!-- Hauptcontent -->
|
|
</article>
|
|
</x-web.content-layout>
|
|
```
|
|
|
|
### Page Header
|
|
**Pfad:** `resources/views/components/web/page-header.blade.php`
|
|
|
|
Header für Unterseiten mit Titel, Subtitle und optionalem Bild.
|
|
|
|
**Props:**
|
|
- `$title` (string, required): Hauptüberschrift
|
|
- `$subtitle` (string, optional): Untertitel
|
|
- `$meta` (slot, optional): Meta-Informationen (Badges, Datum, etc.)
|
|
- `$image` (string, optional): URL für Header-Bild
|
|
- `$compact` (bool): Kompakte Version (default: `false`)
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<x-web.page-header
|
|
title="Die Zukunft der KI"
|
|
subtitle="Exklusive Einblicke in die Herausforderungen">
|
|
<x-slot name="meta">
|
|
<span class="badge badge-primary">Exklusiv-Interview</span>
|
|
<span>17. Oktober 2024</span>
|
|
</x-slot>
|
|
</x-web.page-header>
|
|
```
|
|
|
|
---
|
|
|
|
## Navigation-Komponenten
|
|
|
|
### Main Navigation
|
|
**Pfad:** `resources/views/components/web/main-navigation.blade.php`
|
|
|
|
Sticky Navigation für verschiedene Themes.
|
|
|
|
**Props:**
|
|
- `$theme` (string): Theme-Name - `'presseecho'` oder `'businessportal24'` (default: `'presseecho'`)
|
|
- `$items` (array, optional): Custom Navigation-Items
|
|
|
|
**Beispiel Standard:**
|
|
```blade
|
|
<x-web.main-navigation theme="presseecho" />
|
|
```
|
|
|
|
**Beispiel Custom Items:**
|
|
```blade
|
|
<x-web.main-navigation
|
|
theme="presseecho"
|
|
:items="[
|
|
['label' => 'Kategorien', 'url' => '/kategorien'],
|
|
['label' => 'Autoren', 'url' => '/autoren'],
|
|
]"
|
|
/>
|
|
```
|
|
|
|
### Breadcrumb
|
|
**Pfad:** `resources/views/components/web/breadcrumb.blade.php`
|
|
|
|
Breadcrumb-Navigation für Unterseiten.
|
|
|
|
**Props:**
|
|
- `$items` (array, required): Array von Breadcrumb-Items
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<x-web.breadcrumb :items="[
|
|
['label' => 'Themendossiers', 'url' => '/themendossiers'],
|
|
['label' => 'KI & Innovation', 'url' => '/themendossiers/ki'],
|
|
['label' => 'Artikel-Titel']
|
|
]" />
|
|
```
|
|
|
|
---
|
|
|
|
## Content-Komponenten
|
|
|
|
### Section Header
|
|
**Pfad:** `resources/views/components/web/section-header.blade.php`
|
|
|
|
Header für Content-Sections.
|
|
|
|
**Props:**
|
|
- `$title` (string, required): Section-Titel
|
|
- `$subtitle` (string, optional): Subtitle
|
|
- `$size` (string): Größe - `'small'`, `'medium'`, `'large'` (default: `'medium'`)
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<x-web.section-header
|
|
title="Neueste Analysen"
|
|
subtitle="Fundierte Einschätzungen von Branchenexperten"
|
|
size="medium"
|
|
/>
|
|
```
|
|
|
|
### Hero Banner
|
|
**Pfad:** `resources/views/components/web/hero-banner.blade.php`
|
|
|
|
Hero-Section für Startseiten.
|
|
|
|
**Props:**
|
|
- `$theme` (string): Theme-Name (default: `'presseecho'`)
|
|
- `$title` (slot): Hero-Titel
|
|
- `$subtitle` (slot): Hero-Subtitle
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<x-web.hero-banner theme="presseecho">
|
|
<x-slot name="title">
|
|
Exklusive Fachmeldungen <span class="opacity-50">für Ihre Recherche</span>
|
|
</x-slot>
|
|
<x-slot name="subtitle">
|
|
Exklusive Wirtschaftsinformationen für Journalisten
|
|
</x-slot>
|
|
</x-web.hero-banner>
|
|
```
|
|
|
|
### Sidebar Widget
|
|
**Pfad:** `resources/views/components/web/sidebar-widget.blade.php`
|
|
|
|
Widget-Container für Sidebar-Elemente.
|
|
|
|
**Props:**
|
|
- `$title` (string, optional): Widget-Titel
|
|
- `$icon` (slot, optional): Icon als SVG
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<x-web.sidebar-widget title="Über den Autor">
|
|
<div class="flex items-start gap-4">
|
|
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)]">
|
|
<!-- Avatar -->
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold">Dr. Maria Schmidt</h4>
|
|
<p class="text-sm">Expertin für KI</p>
|
|
</div>
|
|
</div>
|
|
</x-web.sidebar-widget>
|
|
```
|
|
|
|
---
|
|
|
|
## Card-Komponenten
|
|
|
|
### Article Card
|
|
**Pfad:** `resources/views/components/web/article-card.blade.php`
|
|
|
|
Standard-Karte für Artikel.
|
|
|
|
**Props:**
|
|
- `$article` (array, required): Artikel-Daten
|
|
|
|
**Erforderliche Array-Struktur:**
|
|
```php
|
|
$article = [
|
|
'badge' => 'Analyse',
|
|
'badgeType' => 'primary', // primary, secondary, success, warning
|
|
'category' => 'Industrie 4.0',
|
|
'categoryBadgeType' => 'secondary',
|
|
'date' => '2024-10-16',
|
|
'dateFormatted' => '16. Okt 2024',
|
|
'title' => 'Artikeltitel',
|
|
'teaser' => 'Kurzbeschreibung...',
|
|
'author' => 'Thomas Müller',
|
|
'authorInitials' => 'TM',
|
|
'image' => 'https://...',
|
|
];
|
|
```
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($articles as $article)
|
|
<x-web.article-card :article="$article" />
|
|
@endforeach
|
|
</div>
|
|
```
|
|
|
|
### Dossier Card
|
|
**Pfad:** `resources/views/components/web/dossier-card.blade.php`
|
|
|
|
Karte für Themendossiers.
|
|
|
|
**Props:**
|
|
- `$dossier` (array, required): Dossier-Daten
|
|
|
|
**Erforderliche Array-Struktur:**
|
|
```php
|
|
$dossier = [
|
|
'title' => 'KI in der Industrie',
|
|
'description' => 'Alle Facetten der künstlichen Intelligenz...',
|
|
'articleCount' => 12,
|
|
'image' => 'https://...',
|
|
];
|
|
```
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
@foreach ($dossiers as $dossier)
|
|
<x-web.dossier-card :dossier="$dossier" />
|
|
@endforeach
|
|
</div>
|
|
```
|
|
|
|
### Highlight Card
|
|
**Pfad:** `resources/views/components/web/highlight-card.blade.php`
|
|
|
|
Karte für Highlights (wird im Slider verwendet).
|
|
|
|
**Props:**
|
|
- `$highlight` (array, required): Highlight-Daten
|
|
|
|
**Erforderliche Array-Struktur:**
|
|
```php
|
|
$highlight = [
|
|
'badge' => 'Exklusiv-Interview',
|
|
'badgeType' => 'primary',
|
|
'industry' => 'KI & Innovation',
|
|
'date' => '17. Oktober 2024',
|
|
'title' => 'Die Zukunft der KI',
|
|
'text' => 'Beschreibungstext...',
|
|
'author' => 'Dr. Maria Schmidt',
|
|
'authorRole' => 'Expertin für KI',
|
|
'initials' => 'MS',
|
|
'image' => 'https://...',
|
|
];
|
|
```
|
|
|
|
### Highlights Slider
|
|
**Pfad:** `resources/views/components/web/highlights-slider.blade.php`
|
|
|
|
Interaktiver Slider für Highlights mit Navigation und Keyboard-Support.
|
|
|
|
**Props:**
|
|
- `$highlights` (array, required): Array von Highlight-Daten
|
|
- `$theme` (string): Theme-Name (default: `'presseecho'`)
|
|
|
|
**Beispiel:**
|
|
```blade
|
|
@php
|
|
$highlights = [
|
|
[
|
|
'badge' => 'Exklusiv-Interview',
|
|
'badgeType' => 'primary',
|
|
'industry' => 'KI & Innovation',
|
|
'date' => '17. Oktober 2024',
|
|
'title' => 'Die Zukunft der KI',
|
|
'text' => 'Interview-Text...',
|
|
'author' => 'Dr. Maria Schmidt',
|
|
'authorRole' => 'Expertin',
|
|
'initials' => 'MS',
|
|
'image' => 'https://...',
|
|
],
|
|
// ... weitere Highlights
|
|
];
|
|
@endphp
|
|
|
|
<x-web.highlights-slider :highlights="$highlights" theme="presseecho" />
|
|
```
|
|
|
|
---
|
|
|
|
## Verwendungsbeispiele
|
|
|
|
### Beispiel 1: Artikel-Detailseite
|
|
|
|
```blade
|
|
@extends('web.layouts.web-master')
|
|
|
|
@section('content')
|
|
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
|
|
<livewire:web.burger-menu />
|
|
<livewire:web.header />
|
|
|
|
<x-web.main-navigation theme="presseecho" />
|
|
|
|
<div class="container mx-auto px-4">
|
|
<x-web.breadcrumb :items="[
|
|
['label' => 'Themendossiers', 'url' => '/themendossiers'],
|
|
['label' => 'KI & Innovation', 'url' => '/ki'],
|
|
['label' => 'Artikel-Titel']
|
|
]" />
|
|
</div>
|
|
|
|
<x-web.page-header
|
|
title="Die Zukunft der KI"
|
|
subtitle="Exklusive Einblicke">
|
|
<x-slot name="meta">
|
|
<span class="badge badge-primary">Interview</span>
|
|
<span>17. Oktober 2024</span>
|
|
</x-slot>
|
|
</x-web.page-header>
|
|
|
|
<x-web.content-layout>
|
|
<x-slot name="sidebar">
|
|
<x-web.sidebar-widget title="Über den Autor">
|
|
<!-- Author Info -->
|
|
</x-web.sidebar-widget>
|
|
</x-slot>
|
|
|
|
<article class="prose prose-lg">
|
|
<!-- Artikel-Content -->
|
|
</article>
|
|
</x-web.content-layout>
|
|
|
|
<livewire:web.footer />
|
|
</main>
|
|
@endsection
|
|
```
|
|
|
|
### Beispiel 2: Kategorie-Übersicht
|
|
|
|
```blade
|
|
@extends('web.layouts.web-master')
|
|
|
|
@section('content')
|
|
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950">
|
|
<livewire:web.burger-menu />
|
|
<livewire:web.header />
|
|
|
|
<x-web.main-navigation theme="presseecho" />
|
|
|
|
<div class="container mx-auto px-4">
|
|
<x-web.breadcrumb :items="[
|
|
['label' => 'Themendossiers', 'url' => '/themendossiers'],
|
|
['label' => 'KI & Innovation']
|
|
]" />
|
|
</div>
|
|
|
|
<x-web.page-header
|
|
title="KI & Innovation"
|
|
subtitle="Alle Artikel zum Thema"
|
|
image="https://..." />
|
|
|
|
<x-web.content-layout>
|
|
<x-slot name="sidebar">
|
|
<x-web.sidebar-widget title="Filter">
|
|
<!-- Filter-Optionen -->
|
|
</x-web.sidebar-widget>
|
|
</x-slot>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
@foreach ($articles as $article)
|
|
<x-web.article-card :article="$article" />
|
|
@endforeach
|
|
</div>
|
|
</x-web.content-layout>
|
|
|
|
<livewire:web.footer />
|
|
</main>
|
|
@endsection
|
|
```
|
|
|
|
---
|
|
|
|
## CSS-Klassen
|
|
|
|
### Badge-Typen
|
|
- `badge` - Basis-Badge
|
|
- `badge-primary` - Primary-Farbe
|
|
- `badge-secondary` - Secondary-Farbe
|
|
- `badge-success` - Erfolg (Grün)
|
|
- `badge-warning` - Warnung (Gelb)
|
|
|
|
### Button-Typen
|
|
- `btn-primary` - Primary-Button mit Gradient
|
|
- `btn-secondary` - Secondary-Button
|
|
- `pagination-btn` - Pagination-Button
|
|
- `pagination-active` - Aktive Pagination-Seite
|
|
|
|
### Card-Typen
|
|
- `card` - Basis-Karte
|
|
- `card-hover` - Karte mit Hover-Effekt
|
|
- `highlight-card` - Highlight-Karte (Slider)
|
|
|
|
### Layout-Klassen
|
|
- `section-light-bg` - Heller Section-Hintergrund
|
|
- `section-gradient-bg` - Gradient Section-Hintergrund
|
|
- `page-header` - Page-Header-Container
|
|
- `page-header-compact` - Kompakter Page-Header
|
|
|
|
---
|
|
|
|
## Theme-Anpassung
|
|
|
|
Alle Komponenten respektieren die Theme-Variablen:
|
|
|
|
```css
|
|
:root {
|
|
--primary: /* HSL-Werte */
|
|
--secondary: /* HSL-Werte */
|
|
--color-primary: /* Hex-Werte */
|
|
--color-secondary: /* Hex-Werte */
|
|
}
|
|
```
|
|
|
|
**Presseecho:**
|
|
- Primary: `#345636` (Grün)
|
|
- Secondary: `#6b8f71` (Hellgrün)
|
|
|
|
**Businessportal24:**
|
|
- Primary: `#cf3628` (Rot)
|
|
- Secondary: `#f0834a` (Orange)
|
|
|
|
---
|
|
|
|
## Best Practices
|
|
|
|
1. **Komponenten-Verwendung:**
|
|
- Nutzen Sie immer die wiederverwendbaren Komponenten
|
|
- Vermeiden Sie duplizierte HTML-Strukturen
|
|
- Verwenden Sie Props für dynamische Inhalte
|
|
|
|
2. **CSS-Klassen:**
|
|
- Nutzen Sie die vordefinierten CSS-Klassen aus `shared-styles.css`
|
|
- Vermeiden Sie Inline-Styles, wo möglich
|
|
- Theme-spezifische Overrides in den jeweiligen Theme-CSS-Dateien
|
|
|
|
3. **Datenstruktur:**
|
|
- Halten Sie sich an die definierten Array-Strukturen
|
|
- Verwenden Sie `@php`-Blöcke für Daten-Definitionen
|
|
- Dokumentieren Sie Custom-Properties
|
|
|
|
4. **Accessibility:**
|
|
- Verwenden Sie semantische HTML-Tags
|
|
- Fügen Sie `aria-label` zu interaktiven Elementen hinzu
|
|
- Testen Sie die Keyboard-Navigation
|
|
|
|
---
|
|
|
|
## Support
|
|
|
|
Bei Fragen zur Verwendung der Komponenten:
|
|
- Siehe Beispiele unter `/resources/views/web/examples/`
|
|
- Konsultieren Sie diese Dokumentation
|
|
- Prüfen Sie die bestehenden Implementierungen in `presseecho.blade.php`
|
|
|