Einfache, moderne Blade-Komponenten für Laravel und Livewire, basierend auf Bootstrap 5.x.
Dieses Paket bietet eine Sammlung vorkonfigurierter Blade-Komponenten (z.B. <x-bs::button>, <x-bs::select>), die gängige UI-Elemente wie Formulare, Grid-Layouts, Toasts und Theme-Umschaltung vereinfachen und Livewire-Ready sind.
Installiere das Paket über Composer:
composer require nexus633/laravel-bootstrap-uiFür eine optimale Performance sollten die Assets einmalig in den public-Ordner veröffentlicht werden:
php artisan vendor:publish --tag=bootstrap-ui-assetsUm die Styles, Skripte und die globale Logik (Theme-Toggle, Benachrichtigungen) zu laden, integriere die Komponenten in dein Haupt-Layout (app.blade.php).
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<x-bs::head />
</head>
<body>
{{-- Globale Container für Benachrichtigungen --}}
<x-bs::flash />
<x-bs::toasts />
{{ $slot }}
{{-- Lädt JS, Alpine und kann optional Charts laden --}}
<x-bs::scripts />
</body>
</html>Hier sind einige Beispiele, wie die Komponenten verwendet werden:
Einfache Validierung und Bindung durch das name-Attribut:
<x-bs::select
name="status"
label="Status wählen"
:options="['A' => 'Aktiv', 'I' => 'Inaktiv']"
wire:model="userStatus"
/>
<x-bs::password
name="password"
label="Passwort"
icon="bi-key"
/>Einfache responsive Spalten und Gutter-Steuerung:
<x-bs::container>
<x-bs::row gx="4">
<x-bs::row.col md="6" lg="4">
{{-- Inhalt 1 --}}
</x-bs::row.col>
<x-bs::row.col md="6" lg="8">
{{-- Inhalt 2 --}}
</x-bs::row.col>
</x-bs::row>
</x-bs::container>Aufruf aus Controllern oder Livewire (die Komponente <x-bs::toasts> muss im Layout vorhanden sein):
use Nexus633\BootstrapUi\Facades\Toast;
use Nexus633\BootstrapUi\Facades\Flash;
// Temporäres Pop-up
Toast::success('Die Aktion war erfolgreich!');
// Persistenter Alert (oft nach Redirects)
Flash::warning('Bitte prüfen Sie Ihre Eingaben.');Alle Komponenten, Eigenschaften (@props), Konfigurationsoptionen und detaillierte Anwendungsbeispiele (inkl. Livewire/Alpine-Optimierungen) findest du in unserem Wiki: