Skip to main content

Shout

v4.0.1
71
514,349

A simple inline contextual notice for Filament forms and infolist, basically just a fancy placeholder.

  • filament
  • filament-plugin
Shout thumbnail

Installation

You can install the package via composer:

composer require awcodes/shout

Important

If you have not set up a custom theme and are using Filament Panels follow the instructions in the Filament Docs first.

After setting up a custom theme add the plugin's views to your theme css file or your app's css file if using the standalone packages.

@source '../../../../vendor/awcodes/shout/resources/**/*.blade.php';

Usage

Simply include the component in any of your form or infolists schema() methods.

use Awcodes\Shout\Components\Shout;

Shout::make('so-important')
    ->content('This is a test')

Custom Colors

You can use the color() method to set a custom color using Filament's Color Object.

use Awcodes\Shout\Components\Shout;
use Filament\Support\Colors\Color;

Shout::make('so-important')
    ->content('This is a test')
    ->color(Color::Lime)

Shout::make('so-important')
    ->content('This is a test')
    ->color(Color::hex('#badA55'))

Icons

Changing the icon

use Awcodes\Shout\Components\Shout;

Shout::make('so-important')
    ->content('This is a test')
    ->icon('heroicon-s-circle-check')

Icon Size

use Awcodes\Shout\Components\Shout;

Shout::make('so-important')
    ->content('This is a test')
    ->iconSize('sm|md|lg|xl')

Disabling the icon

use Awcodes\Shout\Components\Shout;

Shout::make('so-important')
    ->content('This is a test')
    ->icon(false)

Headings

You can add a heading to your shout using the heading() method. By default , the heading will be a h2 element, but you can override this by using an HtmlString object.

use Awcodes\Shout\Components\Shout;

Shout::make('so-important')
    ->heading('Important Notice')
    ->content('This is a test')

Actions

You can add actions to your shout using the actions() method. This accepts an array of Filament Action objects.

use Awcodes\Shout\Components\Shout;
use Filament\Forms\Components\Actions\Action;

Shout::make('so-important')
    ->content('This is a test')
    ->actions([
        Action::make('action1')
            ->label('Action 1')
            ->url('https://example.com'),
        Action::make('action2')
            ->label('Action 2')
            ->url('https://example.com'),
    ])