diff --git a/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php b/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php index 87ac5670c1..20fe99691b 100644 --- a/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php +++ b/docs-assets/app/app/Livewire/Schemas/LayoutDemo.php @@ -11,6 +11,7 @@ use Filament\Forms\Components\Select; use Filament\Forms\Components\Textarea; use Filament\Forms\Components\TextInput; use Filament\Forms\Components\Toggle; +use Filament\Infolists\Components\TextEntry; use Filament\Schemas\Components\Actions; use Filament\Schemas\Components\EmptyState; use Filament\Schemas\Components\Fieldset; @@ -90,6 +91,38 @@ class LayoutDemo extends Component implements HasActions, HasSchemas ]) ->columns(3), ]), + Group::make() + ->id('dense') + ->extraAttributes([ + 'class' => 'p-16 max-w-2xl', + ]) + ->schema([ + Fieldset::make('Dense') + ->columns(1) + ->dense() + ->schema([ + TextEntry::make('name') + ->state('Dan Harrin'), + TextEntry::make('role') + ->state('Admin'), + ]), + ]), + Group::make() + ->id('noGap') + ->extraAttributes([ + 'class' => 'p-16 max-w-2xl', + ]) + ->schema([ + Fieldset::make('No gap') + ->columns(1) + ->gap(false) + ->schema([ + TextEntry::make('name') + ->state('Dan Harrin'), + TextEntry::make('role') + ->state('Admin'), + ]), + ]), Group::make() ->id('tabs') ->extraAttributes([ diff --git a/docs-assets/screenshots/images/dark/schemas/layout/dense.jpg b/docs-assets/screenshots/images/dark/schemas/layout/dense.jpg new file mode 100644 index 0000000000..0751078422 Binary files /dev/null and b/docs-assets/screenshots/images/dark/schemas/layout/dense.jpg differ diff --git a/docs-assets/screenshots/images/dark/schemas/layout/no-gap.jpg b/docs-assets/screenshots/images/dark/schemas/layout/no-gap.jpg new file mode 100644 index 0000000000..7f299c5f33 Binary files /dev/null and b/docs-assets/screenshots/images/dark/schemas/layout/no-gap.jpg differ diff --git a/docs-assets/screenshots/images/light/schemas/layout/dense.jpg b/docs-assets/screenshots/images/light/schemas/layout/dense.jpg new file mode 100644 index 0000000000..eb974405a1 Binary files /dev/null and b/docs-assets/screenshots/images/light/schemas/layout/dense.jpg differ diff --git a/docs-assets/screenshots/images/light/schemas/layout/no-gap.jpg b/docs-assets/screenshots/images/light/schemas/layout/no-gap.jpg new file mode 100644 index 0000000000..4b6b30b9c4 Binary files /dev/null and b/docs-assets/screenshots/images/light/schemas/layout/no-gap.jpg differ diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js index f9e21e9923..694399bdda 100644 --- a/docs-assets/screenshots/schema.js +++ b/docs-assets/screenshots/schema.js @@ -1538,6 +1538,24 @@ export default { deviceScaleFactor: 3, }, }, + 'schemas/layout/dense': { + url: 'schemas/layout', + selector: '#dense', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, + 'schemas/layout/no-gap': { + url: 'schemas/layout', + selector: '#noGap', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, 'schemas/layout/tabs/simple': { url: 'schemas/layout', selector: '#tabs', diff --git a/packages/schemas/docs/02-layouts.md b/packages/schemas/docs/02-layouts.md index 45b306f18c..82f498100c 100644 --- a/packages/schemas/docs/02-layouts.md +++ b/packages/schemas/docs/02-layouts.md @@ -404,6 +404,40 @@ Grid::make() In this example, the fallback breakpoints ensure that even in browsers that don't support container queries, the layout will still respond to viewport size changes, with the name field appearing first and the email field second on larger screens. +## Controlling spacing between components + +### Reducing space between components + +The `dense()` method creates a more compact layout by reducing the spacing between components by 50%: + +```php +use Filament\Schemas\Components\Grid; + +Grid::make() + ->dense() + ->schema([ + // ... + ]) +``` + + + +### Removing space between components + +The `gap(false)` method removes space between components: + +```php +use Filament\Schemas\Components\Grid; + +Grid::make() + ->gap(false) + ->schema([ + // ... + ]) +``` + + + ## Adding extra HTML attributes to a layout component You can pass extra HTML attributes to the component via the `extraAttributes()` method, which will be merged onto its outer HTML element. The attributes should be represented by an array, where the key is the attribute name and the value is the attribute value: