| Install | |
|---|---|
composer require iamgerwin/filament-flexible-content |
|
| Latest Version: | 1.2.3 |
| PHP: | ^8.2 |
Flexible Content & Repeater Fields for Laravel Filament v4. Built with PHP 8.2+ features for maximum performance and type safety.
You can install the package via composer:
composer require iamgerwin/filament-flexible-content
You can publish and run the migrations with:
php artisan vendor:publish --tag="filament-flexible-content-migrations"
php artisan migrate
You can publish the config file with:
php artisan vendor:publish --tag="filament-flexible-content-config"
This is the contents of the published config file:
return [
'layouts_directory' => app_path('Filament/Flexible/Layouts'),
'presets_directory' => app_path('Filament/Flexible/Presets'),
'auto_register_layouts' => true,
'auto_register_presets' => true,
'cache' => [
'enabled' => env('FLEXIBLE_CONTENT_CACHE', true),
'key' => 'filament-flexible-content',
'ttl' => 3600,
],
'defaults' => [
'collapsible' => true,
'cloneable' => true,
'reorderable' => true,
'columns' => 2,
],
];
Add the flexible content field to your Filament resource:
use IamGerwin\FilamentFlexibleContent\Forms\Components\FlexibleContent;
use App\Filament\Flexible\Layouts\HeroLayout;
use App\Filament\Flexible\Layouts\ContentLayout;
public static function form(Form $form): Form
{
return $form
->schema([
FlexibleContent::make('content')
->layouts([
HeroLayout::make(),
ContentLayout::make(),
])
]);
}
Create a new layout using the artisan command:
php artisan make:flexible-layout HeroSection
Or create a layout manually:
<?php
namespace App\Filament\Flexible\Layouts;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use IamGerwin\FilamentFlexibleContent\Layouts\Layout;
final class HeroLayout extends Layout
{
protected ?string $name = 'hero';
protected ?string $title = 'Hero Section';
protected function setUp(): void
{
parent::setUp();
$this->icon('heroicon-o-rectangle-group')
->fields([
TextInput::make('heading')
->required()
->maxLength(255),
Textarea::make('subheading')
->rows(2)
->maxLength(500),
]);
}
}
Create a preset to bundle multiple layouts:
php artisan make:flexible-layout PageBuilder --preset
<?php
namespace App\Filament\Flexible\Presets;
use IamGerwin\FilamentFlexibleContent\Layouts\Preset;
use App\Filament\Flexible\Layouts\HeroLayout;
use App\Filament\Flexible\Layouts\ContentLayout;
final class PageBuilder extends Preset
{
public function register(): void
{
$this->addLayouts([
HeroLayout::make(),
ContentLayout::make(),
]);
}
}
Use the preset in your form:
FlexibleContent::make('content')
->preset(PageBuilder::class)
FlexibleContent::make('content')
->layouts([/* ... */])
->minLayouts(1) // Minimum number of layouts
->maxLayouts(10) // Maximum number of layouts
->onlyLayouts(['hero']) // Limit to specific layouts
->collapsible() // Make blocks collapsible
->cloneable() // Allow cloning blocks
->reorderable() // Allow reordering blocks
->columnSpanFull() // Full width
The FlexibleContent field supports conditional visibility based on other form fields:
// Show flexible content only when type is 'national'
FlexibleContent::make('content')
->dependsOn('type', fn ($get) => $get('type') === 'national')
->layouts([/* ... */])
// Multiple field dependencies
FlexibleContent::make('content')
->dependsOn(['type', 'status'], function ($get) {
return $get('type') === 'national' && $get('status') === 'published';
})
->layouts([/* ... */])
You can also apply conditional visibility to individual layouts:
class ConditionalLayout extends Layout
{
protected function setUp(): void
{
parent::setUp();
// Only show this layout when scope is 'global'
$this->dependsOn('scope', fn ($get) => $get('scope') === 'global');
$this->fields([
TextInput::make('title')->required(),
]);
}
}
Add the cast to your model:
use IamGerwin\FilamentFlexibleContent\Casts\FlexibleContentCast;
class Page extends Model
{
protected $casts = [
'content' => FlexibleContentCast::class,
];
}
@foreach($page->content as $block)
@switch($block->layout)
@case('hero')
<div class="hero-section">
<h1>{{ $block->get('heading') }}</h1>
<p>{{ $block->get('subheading') }}</p>
</div>
@break
@case('content')
<div class="content-section">
{!! $block->get('content') !!}
</div>
@break
@endswitch
@endforeach
// Check layout type
if ($block->is('hero')) {
// Handle hero layout
}
// Access data
$heading = $block->get('heading');
$hasHeading = $block->has('heading');
// Access metadata
$order = $block->getMeta('order');
// Convert to array
$array = $block->toArray();
composer test
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.