From eba35e2dc9483f3344f8670868739c03518ceaa7 Mon Sep 17 00:00:00 2001 From: TobMoeller Date: Fri, 22 Mar 2024 00:02:38 +0100 Subject: [PATCH 1/3] add livewire banner alerts section --- src/stacks/livewire.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src/stacks/livewire.md b/src/stacks/livewire.md index 413a6cf..2f7f9dc 100644 --- a/src/stacks/livewire.md +++ b/src/stacks/livewire.md @@ -60,3 +60,43 @@ To illustrate the use of modals, consider the following modal that confirms a us As you can see, the modal's open / close state is determined by a `wire:model` property that is declared on the component. The property's name should correspond to a boolean property on your Livewire component's corresponding PHP class. Typically, you will set this property to `true` when the user clicks a UI element in your application that should open the modal. Of course, the property should be set to `false` when you are ready to close the modal. The modal's contents may be specified by hydrating three Blade component slots: `title`, `content`, and `footer`. + +## Banner Alerts + +Jetstream includes an `InteractsWithBanner` trait that is designed to simplify the process of displaying banner messages to the user using Livewire. + +It provides methods to quickly display a `success` or `danger` message with the help of the `resources/views/components/banner.blade.php` component and [Livewire's event system](https://livewire.laravel.com/docs/events). + +### Usage + +To use the `InteractsWithBanner` trait, include it within your Livewire component class: + +```php +use Laravel\Jetstream\InteractsWithBanner; + +class YourLivewireComponent extends Component +{ + use InteractsWithBanner; + + // Your component's methods +} +``` + +To display a message to the user, utilize the banner method provided by this trait: + +```php +// success message +$this->banner('Your message here.'); + +// danger message +$this->dangerBanner('Your message here.'); +``` + +Internally these methods dispatch the `banner-message` Livewire event. This event carries two parameters: `style` and `message`, which instruct the banner component on how to display the message. + +```php +$this->dispatch('banner-message', style: 'success', message: 'Your message here.'); +``` + + + From 52a2d34d0c7f307c3e3878fef8139438d1e65ee3 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Fri, 22 Mar 2024 13:07:59 -0600 Subject: [PATCH 2/3] formatting --- src/stacks/livewire.md | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/src/stacks/livewire.md b/src/stacks/livewire.md index 2f7f9dc..5df3300 100644 --- a/src/stacks/livewire.md +++ b/src/stacks/livewire.md @@ -63,39 +63,31 @@ The modal's contents may be specified by hydrating three Blade component slots: ## Banner Alerts -Jetstream includes an `InteractsWithBanner` trait that is designed to simplify the process of displaying banner messages to the user using Livewire. +Jetstream's Livewire stack includes an `InteractsWithBanner` trait that is designed to simplify the process of displaying banner messages to the user. -It provides methods to quickly display a `success` or `danger` message with the help of the `resources/views/components/banner.blade.php` component and [Livewire's event system](https://livewire.laravel.com/docs/events). +The `InteractsWithBanner` trait provides methods to quickly display a `success` or `danger` message with the help of the `resources/views/components/banner.blade.php` component and [Livewire's event system](https://livewire.laravel.com/docs/events). ### Usage -To use the `InteractsWithBanner` trait, include it within your Livewire component class: +First, include the `InteractsWithBanner` trait within one of your Livewire components: ```php use Laravel\Jetstream\InteractsWithBanner; -class YourLivewireComponent extends Component +class ExampleComponent extends Component { use InteractsWithBanner; - // Your component's methods + // ... } ``` -To display a message to the user, utilize the banner method provided by this trait: +To display a message to the user, invoke the `banner` or `dangerBanner` methods within a Livewire component method: ```php -// success message -$this->banner('Your message here.'); +$this->banner('Invoice paid.'); -// danger message -$this->dangerBanner('Your message here.'); -``` - -Internally these methods dispatch the `banner-message` Livewire event. This event carries two parameters: `style` and `message`, which instruct the banner component on how to display the message. - -```php -$this->dispatch('banner-message', style: 'success', message: 'Your message here.'); +$this->dangerBanner('Payment failed.'); ``` From 8af7f2bc8d4f49ac545c1952cd04d5c691489480 Mon Sep 17 00:00:00 2001 From: Taylor Otwell Date: Fri, 22 Mar 2024 13:08:26 -0600 Subject: [PATCH 3/3] formatting --- src/stacks/livewire.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/stacks/livewire.md b/src/stacks/livewire.md index 5df3300..c38da4b 100644 --- a/src/stacks/livewire.md +++ b/src/stacks/livewire.md @@ -89,6 +89,3 @@ $this->banner('Invoice paid.'); $this->dangerBanner('Payment failed.'); ``` - - -