From 4d5bc0b4c157b5162d04c6f97b4ccac52869feeb Mon Sep 17 00:00:00 2001 From: Dan Harrin Date: Wed, 9 Apr 2025 18:11:03 +0100 Subject: [PATCH] docs --- .../views/livewire/actions.blade.php | 29 ++++++++++++++---- .../dark/actions/group/button-group.jpg | Bin 0 -> 8582 bytes .../light/actions/group/button-group.jpg | Bin 0 -> 8630 bytes docs-assets/screenshots/schema.js | 9 ++++++ packages/actions/docs/03-grouping-actions.md | 22 +++++++++++++ 5 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 docs-assets/screenshots/images/dark/actions/group/button-group.jpg create mode 100644 docs-assets/screenshots/images/light/actions/group/button-group.jpg diff --git a/docs-assets/app/resources/views/livewire/actions.blade.php b/docs-assets/app/resources/views/livewire/actions.blade.php index 8c58deac11..f286823d9d 100644 --- a/docs-assets/app/resources/views/livewire/actions.blade.php +++ b/docs-assets/app/resources/views/livewire/actions.blade.php @@ -1,5 +1,9 @@ -@php use Filament\Actions\ActionGroup; @endphp -@php use Filament\Actions\Action; @endphp +@php + use Filament\Actions\Action; + use Filament\Actions\ActionGroup; + use Filament\Support\Icons\Heroicon; +@endphp +
@if (! count($this->mountedActions))
@@ -86,27 +90,40 @@ Action::make('delete'), ]" label="More actions" - :icon="\Filament\Support\Icons\Heroicon::EllipsisVertical" + :icon="Heroicon::EllipsisVertical" size="sm" color="primary" button />
+
+ {{ ActionGroup::make([ + Action::make('edit') + ->color('gray') + ->icon(Heroicon::PencilSquare) + ->hiddenLabel(), + Action::make('delete') + ->color('gray') + ->icon(Heroicon::Trash) + ->hiddenLabel(), + ])->buttonGroup() }} +
+
dZOq>73~td(Lp*`QQKL-uvHo-}m4D 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 N3@kD5XEGoW`~%3;p;G_= literal 0 HcmV?d00001 diff --git a/docs-assets/screenshots/images/light/actions/group/button-group.jpg b/docs-assets/screenshots/images/light/actions/group/button-group.jpg new file mode 100644 index 0000000000000000000000000000000000000000..76b2a52a4ab29baf09c77d08de11f5f935628526 GIT binary patch literal 8630 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 setTimeout(resolve, 500)) }, }, + 'actions/group/button-group': { + url: 'actions', + selector: '#actionButtonGroup', + viewport: { + width: 1920, + height: 640, + deviceScaleFactor: 3, + }, + }, 'actions/group/placement': { url: 'actions', selector: '#actionGroupPlacement', diff --git a/packages/actions/docs/03-grouping-actions.md b/packages/actions/docs/03-grouping-actions.md index 011771c51b..6a373bc241 100644 --- a/packages/actions/docs/03-grouping-actions.md +++ b/packages/actions/docs/03-grouping-actions.md @@ -45,6 +45,28 @@ ActionGroup::make([ +### Using a grouped button design + +Instead of a dropdown, an action group can render itself as a group of buttons. This design works with and without button labels. To use this feature, use the `buttonGroup()` method: + +```php +use Filament\Actions\Action; +use Filament\Actions\ActionGroup; +use Filament\Support\Icons\Heroicon; + +ActionGroup::make([ + Action::make('edit') + ->color('gray') + ->icon(Heroicon::PencilSquare) + ->hiddenLabel(), + Action::make('delete') + ->color('gray') + ->icon(Heroicon::Trash) + ->hiddenLabel(), +]) + ->buttonGroup() +``` + ## Setting the placement of the dropdown The dropdown may be positioned relative to the trigger button by using the `dropdownPlacement()` method: