Banner

>= v1.1

Banner component.

Banner, Personalization Blocks

This content is part of TallStackUI personalization.

Example:

TallStackUi::personalize()
    ->banner()
    ->block('block', 'classes');

The soft personalization should be done in boot method of service providers.

# Concept

Version 1.1.0 of TallStackUI introduces a new component: Banner. This component has two approaches of use: static use for displaying fixed or random messages or Livewire integration for displaying messages from the backend to frontend.

An example of the banner component is the banner at the top of the documentation.

# Usage

To use the component you must add it to your application's layout, within the body tag, but above anything else:

<html>
    <body>
        <x-banner /> 
 
        <!-- ... -->
    </body>
</html>

# Messages

<html>
    <body>
        <!-- Fixed text -->
        <x-banner text="Welcome to the TallStackUI!" />
 
        <!-- Random text -->
        <x-banner :text="['Welcome to the TallStackUI!', 'This is the TallStackUI']" />
 
        <!-- Random based on Collection -->
        <x-banner :text="collect(['Welcome to the TallStackUI!', 'This is the TallStackUI'])" />
    </body>
</html>

You can take advantage of collections to get an array of messages from the database.

# Left Slot

<html>
    <body>
        <x-banner text="Welcome to the TallStackUI!">
            <x-slot:left>
                <x-icon name="check" />
            </x-slot:left>
        </x-banner>
    </body>
</html>

# Close Option

<html>
    <body>
        <x-banner text="Welcome to the TallStackUI!" close />
    </body>
</html>

# Animations

<html>
    <body>
        <!-- Default: entering in 3 seconds -->
        <x-banner text="Welcome to the TallStackUI!" animated />
 
        <!-- Entering in 2 seconds, leaving in 5 seconds -->
        <x-banner text="Welcome to the TallStackUI!" animated :enter="2" :leave="5" />
 
        <!-- Only leaving effect -->
        <x-banner text="Welcome to the TallStackUI!" animated :enter="null" :leave="5" />
    </body>
</html>

# Date Limit

An option to control the final date to display the banner.

<html>
    <body>
        <!-- String -->
        <x-banner text="Welcome to the TallStackUI!" until="2023-12-31" />
 
        <!-- Carbon instance -->
        <x-banner text="Welcome to the TallStackUI!" :until="now()->addDay()" />
    </body>
</html>

# Size Variations

<html>
    <body>
        <!-- Allowed: sm, md, lg -->
        <x-banner text="Welcome to the TallStackUI!" size="lg" />
    </body>
</html>

# Color Variations & Light Option

<html>
    <body>
        <!-- All TailwindCSS colors -->
        <x-banner text="Welcome to the TallStackUI!" color="primary" />
        <x-banner text="Welcome to the TallStackUI!" color="secondary" />
 
        <!-- Light variation -->
        <x-banner text="Welcome to the TallStackUI!" color="primary" light />
        <x-banner text="Welcome to the TallStackUI!" color="secondary" light />
 
        <!-- Hexadecimal colors using TailwindCSS Arbitrary colors -->
        <x-banner text="Welcome to the TallStackUI!"
                  :color="[
                      'background' => 'bg-[#fde68a]',
                      'text' => 'text-[#1f2937]',
                  ]" />
    </body>
</html>

Livewire Integration

# Concept

Unlike the static format, the use of the banner with Livewire integration can only have the size configurable option in the layout. All other available options must be configured when dispatching the banner through Livewire, so in the layout, the banner must be added as follows:

<html>
    <body>
        <x-banner wire />
 
        <!-- or -->
 
        <!-- Allowed: sm, md, lg -->
        <x-banner wire size="lg" />
    </body>
</html>

When using the banner integrated with Livewire then the banner will be displayed as fixed. This is a strategy adopted so that the banner is displayed if the user is below the top of the page.

# Usage

1. Use the Interactions trait in your Livewire component.

use TallStackUi\Traits\Interactions; 
 
class CreateUser extends Component
{
    use Interactions; 
 
    // ...
}

2. Dispatch the Banner from a method.

public function save(): void
{
    $this->banner()->success('...')->send();
    $this->banner()->error('...')->send();
    $this->banner()->warning('...')->send();
    $this->banner()->info('...')->send();
}

This is an example. You can't dispatch all at the same time.

# Available Options

public function save(): void
{
    $this->banner()
        ->close() // Add the close button
        ->success('...')
        ->send();
 
    $this->banner()
        ->enter(seconds: 3) // Enter in 3 seconds
        ->leave(seconds: 10) // Leave in 10 seconds
        ->success('...')
        ->send();
 
    $this->banner()
        ->leave(seconds: 10) // Controlling only the seconds to leave
        ->success('...')
        ->send();
}

# Example

public function success(): void
{
    $this->banner()
        ->close()
        ->success('This is a banner dispatched through Livewire. Will disappear in 5 seconds.')
        ->leave(5)
        ->send();
}

# Display After Redirects

Starting from version 1.23.0 you can trigger a banner that will actually be displayed after a redirect action. Regardless of whether the redirection is to another Livewire component or to basic controllers, you can still display the banner.

use Illuminate\Contracts\View\View;
use Livewire\Component;
use TallStackUi\Traits\Interactions;
 
class Payment extends Component
{
    use Interactions;
 
    public function render(): View
    {
        return view('livewire.livewire');
    }
 
    public function save()
    {
        $this->banner()
            ->success('Done!', 'Your money has been sent!')
            ->flash() 
            ->send();
 
        return $this->redirect(route('dashboard'));
    }
}

When using flash() method, the banner will not be displayed in the current request, but yes stored temporarily in the session and displayed in the next request.