Plugins
Translatable Tabs
Automatically generate tabs for translations.
Form Builder
Form Field
S
Spatie Integration
Dark theme support
Yes
Multi language support
Yes
Compatible with the latest version
Supported versions: 3.x
Documentation

This package inspired by this filament-translatable-fields, but allowing filament like customizability on the Tabs and Fields components in context of each locale.

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Automatically generate tabs for translations.

This was created to be used with spatie/laravel-translatable, but it can be used standalone as well.

Preview

Preview

#Installation

You can install the package via composer:

composer require abdulmajeed-jamaan/filament-translatable-tabs

Then in any registered service provider boot() method configure the following:

TranslatableTabs::configureUsing(function (TranslatableTabs $component) {
$component
// locales labels
->localesLabels([
'ar' => __('locales.ar'),
'en' => __('locales.en')
])
// default locales
->locales(['ar', 'en']);
});

#Usage

// Single Field
TextInput::make('title')
->translatableTabs();
 
// Multiple Fields
TranslatableTabs::make('anyLabel')
->schema([
Forms\Components\TextInput::make("title"),
Forms\Components\Textarea::make("content")
]);

#Customizations

You can customize Tab and Field based on locale using the following methods:

use AbdulmajeedJamaan\FilamentTranslatableTabs\TranslatableTabs;
use AbdulmajeedJamaan\FilamentTranslatableTabs\TranslatableTab;
use Filament\Forms\Components\Field;
 
$customizeTab = function (TranslatableTab $component, string $locale) {
// ...
};
 
$customizeField = function (Field $component, string $locale) {
// ...
};
 
// Globally in boot method
TranslatableTabs::configureUsing(function (TranslatableTabs $component) {
$component
->modifyTabsUsing($customizeTab)
->modifyFieldsUsing($customizeField);
});
 
// Single Field
TextInput::make()
->translatableTabs()
->modifyTabsUsing($customizeTab)
->modifyFieldsUsing($customizeField)
 
// Multiple Fields
TranslatableTabs::make('anyLabel')
->modifyTabsUsing($customizeTab)
->modifyFieldsUsing($customizeField)
->schema([
Forms\Components\TextInput::make("title"),
Forms\Components\Textarea::make("content")
]);

#Override the default locale

You can add the method locale to change it on the fly:

$localesFn = function () {
return ['ar', 'en'];
 
// also you can override label using:
return [
'ar' => 'Arabic',
'en' => 'English'
]
}
// Single Field
TextInput::make('title')
->translatableTabs()
->locales($localesFn);
 
// Multiple Fields
TranslatableTabs::make('anyLabel')
->locales($localesFn)
->schema([
Forms\Components\TextInput::make("title"),
Forms\Components\Textarea::make("content")
]);

#Pre made configurations

In order to have similar experience to the preview set the following:

TranslatableTabs::configureUsing(function (TranslatableTabs $component) {
$component
->addDirectionByLocale()
->addEmptyBadgeWhenAllFieldsAreEmpty(emptyLabel: __('locales.empty'))
->addSetActiveTabThatHasValue();
});

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

#License

The MIT License (MIT). Please see License File for more information.

Abdulmajeed Jamaan

I thrive on work that positively impacts people's lives.

1
Plugins
19
Stars
Featured Plugins