kingmaker / filament-flex-layout
The Flex layout for the Forms and Infolists components in Filament.
Installs: 11
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:Blade
Requires
- php: ^8.1
- filament/forms: ^v3.3
- filament/infolists: ^v3.3
This package is auto-updated.
Last update: 2025-03-22 11:31:33 UTC
README
This package provides the Flexbox layout for the forms & infolists components in your Filament admin panel.
Documentation
The Split
layout Component in the Forms and Infolists of the Filament panel has been implemented using the CSS Flexbox, But unfortunatley it doesn't support important properties such as justify-content
to manage the arrangement of its children.
The Flex
layout Component solves this problem. The Flex
is a sub-class of the Split
component and provides additional APIs to align the Horizontal Arrangement (justify-content
) and Flex Gap (gap
).
Important
The Children of the Flex
component must be chained with ->grow(false)
method for this to work.
Horizontal Arrangement
The Horizontal placement can be managed using ->horizontalArrangement()
method.
HorizontalArrangement::Start
- Justify content to the start of the container.HorizontalArrangement::Center
- Justify content to the center of the container.HorizontalArrangement::End
- Justify content to the end of the container.HorizontalArrangement::Evenly
- Justify content with even spacing between them.HorizontalArrangement::Between
- Justify content with space between them.HorizontalArrangement::Around
- Justify content with space around them.
Flex Gap
The Gap between the children can be controlled using the ->gap()
method. The gap can be set to a specific value or a Tailwind CSS spacing utility class.
Flex::make([]) ->gap(4) // will be translated to `gap-4` tailwind class
Requirements
This package expects filament/filament
package to be over v3.3
.
Installation
The package can be installed via Composer.
composer require kingmaker/filament-flex-layout
Theming
Note
You need to use custom theme for the Flex
component to work properly.
Add the plugin's views to your tailwind.config.js file.
export default{ content: [ '<path-to-vendor>/kingmaker/filament-flex-layout/resources/views/**/*.blade.php' ] }
Then, add few classes (gap-*
) to your tailwind config file's safelist
.
export default{ content: [ '<path-to-vendor>/kingmaker/filament-flex-layout/resources/views/**/*.blade.php' ], safelist: [ { pattern: /gap-/ }, ] }
Usage
Within your Forms and Infolists schema definition, You can use the Flex
layout Component provided by this package.
use Kingmaker\FilamentFlexLayout\Enums\HorizontalArrangement; use Kingmaker\FilamentFlexLayout\Forms\Flex; Flex::make([ Forms\Components\Toggle::make('user_like') ->grow(false) // <<-- Important ->onIcon('heroicon-s-heart') ->offIcon('heroicon-o-heart') ->onColor('danger') ->offColor('gray'), Forms\Components\Toggle::make('user_read') ->grow(false) // <<-- Important ->onIcon('heroicon-s-book-open') ->offIcon('heroicon-s-book-open') ->onColor('success') ->offColor('gray'), ]) ->horizontalArrangement(HorizontalArrangement::Evenly)
use Kingmaker\FilamentFlexLayout\Enums\HorizontalArrangement; use Kingmaker\FilamentFlexLayout\Infolists\Flex; Flex::make([]) ->horizontalArrangement(HorizontalArrangement::Evenly) ->gap(12)
API Reference
The Flex
component is available for the forms and infolists
Kingmaker\FilamentFlexLayout\Forms\Flex
for forms layout.Kingmaker\FilamentFlexLayout\Infolists\Flex
for infolists layout.
The Flex
component extends the Split
component and provides the following additional methods:
gap(int|string|Closure $value)
- Set the gap between the children. The value can be a number or a Tailwind CSS spacing utility class.horizontalArrangement(HorizontalArrangement|string|Closure $value)
- Set the horizontal arrangement of the children.- The value can be one of the
HorizontalArrangement
enum values. - The value can be one of strings:
start
,center
,end
,evenly
,between
,around
,stretch
. - The value can be a closure that returns one of the above values.
- The value can be one of the
Utility Methods
horizontallyArrangeStart(Closure|bool $condition = true)
- Set the horizontal arrangement tostart
if the condition is true.horizontallyArrangeCenter(Closure|bool $condition = true)
- Set the horizontal arrangement tocenter
if the condition is true.horizontallyArrangeEnd(Closure|bool $condition = true)
- Set the horizontal arrangement toend
if the condition is true.horizontallyArrangeSpaceEvenly(Closure|bool $condition = true)
- Set the horizontal arrangement toevenly
if the condition is true.horizontallyArrangeSpaceBetween(Closure|bool $condition = true)
- Set the horizontal arrangement tobetween
if the condition is true.horizontallyArrangeSpaceAround(Closure|bool $condition = true)
- Set the horizontal arrangement toaround
if the condition is true.horizontallyArrangeStretch(Closure|bool $condition = true)
- Set the horizontal arrangement tostretch
if the condition is true.horizontallyArrangeBaseline(Closure|bool $condition = true)
- Set the horizontal arrangement tobaseline
if the condition is true.
Contributing
Contributions are always welcome!
License
This Package was being published under MIT License.