Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/CodeWithDennis/filament-simple-alert

This package offers a straightforward and easy-to-use alert component for your Filament application. It allows you to quickly implement customizable alert messages, enhancing the user experience by providing clear and concise notifications.
https://github.com/CodeWithDennis/filament-simple-alert

alert alerts filament filament-plugin filamentphp filamentphp-plugin laravel livewire package php plugin

Last synced: 26 days ago
JSON representation

Host: GitHub
URL: https://github.com/CodeWithDennis/filament-simple-alert
Owner: CodeWithDennis
License: mit
Created: 2024-06-27T07:36:56.000Z (8 months ago)
Default Branch: main
Last Pushed: 2025-01-07T08:27:24.000Z (about 1 month ago)
Last Synced: 2025-01-11T15:07:57.300Z (about 1 month ago)
Topics: alert, alerts, filament, filament-plugin, filamentphp, filamentphp-plugin, laravel, livewire, package, php, plugin
Language: PHP
Homepage:
Size: 1.61 MB
Stars: 67
Watchers: 3
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

awesome-laravel-filament - Layout - Alerts

README

        # Filament Simple Alert

[![Latest Version on Packagist](https://img.shields.io/packagist/v/codewithdennis/filament-simple-alert.svg?style=flat-square)](https://packagist.org/packages/codewithdennis/filament-simple-alert)

[![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/codewithdennis/filament-simple-alert/pint.yml?branch=main&label=code%20style&style=flat-square)](https://github.com/codewithdennis/filament-simple-alert/actions?query=workflow%3A"Fix+PHP+code+styling"+branch%3Amain)

[![Total Downloads](https://img.shields.io/packagist/dt/codewithdennis/filament-simple-alert.svg?style=flat-square)](https://packagist.org/packages/codewithdennis/filament-simple-alert)

This package offers a straightforward and easy-to-use alert component for your Filament application. It allows you to quickly implement customizable alert messages, enhancing the user experience by

providing clear and concise notifications.

![Simple Alert](https://github.com/CodeWithDennis/filament-simple-alert/raw/main/resources/screenshots/thumbnail.png)

## Installation

You can install the package via composer:

```bash

composer require codewithdennis/filament-simple-alert

```

Make sure you add the following to your `tailwind.config.js file.

```bash

'./vendor/codewithdennis/filament-simple-alert/resources/**/*.blade.php',

```

### Custom Theme

You will need to [create a custom theme](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) for the styles to be applied correctly.

## Usage

The alerts can be used in your `infolists` or `forms`, make sure you pick the right component.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

```

```php

use CodeWithDennis\SimpleAlert\Components\Forms\SimpleAlert;

```

### Simple Alerts

There are 4 types of simple alerts: `danger`, `info`, `success`, and `warning`.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')

    ->danger()

    ->info()

    ->success()

    ->warning()

```

If you would like to use a [different color](https://filamentphp.com/docs/3.x/support/colors), you can use the `color` method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')

    ->color('purple')

```

### Icon

By default, simple alerts come with an icon. For example, the `->danger()` method includes a `heroicon-s-x-circle` icon. If you want to use a different icon, you can use the icon method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

//use Illuminate\Support\HtmlString;

SimpleAlert::make('example')

    ->color('purple')

    ->icon('heroicon-s-users')

//->icon(new HtmlString('🤓'))

//->icon(new HtmlString(Blade::render('my-custom-icon-component')))

```

#### Icon Vertical Alignment

You can change the vertical alignment of the icon by using the `iconVerticalAlignment` method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')

    ->iconVerticalAlignment('start'), // possible values: start, center

``` 

### Title

You can add a title to the alert by using the `title` method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')

    ->title('Hoorraayy! Your request has been approved! 🎉')

```

### Description

You can add a description to the alert by using the `description` method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')

    ->description('This is the description')

```

### Border

You can add a border to the alert by using the `border` method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

SimpleAlert::make('example')

    ->border()

```

### Actions

You can also add actions to the alert by using the `actions` method. All regular action features are supported.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

use Filament\Forms\Components\Actions;

SimpleAlert::make('example')

    ->columnSpanFull()

    ->success()

    ->title('Simple Alert')

    ->description('This is an example of a simple alert.')

    ->actions([

        Action::make('read-example')

            ->label('Read more')

            ->url('https://filamentphp.com')

            ->openUrlInNewTab()

            ->color('info'),

    ]),

```

#### Actions Vertical Alignment

You can change the vertical alignment of the actions by using the `actionsVerticalAlignment` method.

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

use Filament\Forms\Components\Actions;

SimpleAlert::make('example')

    ->actionsVerticalAlignment('start'), // possible values: start, center

```

### Example

```php

use CodeWithDennis\SimpleAlert\Components\Infolists\SimpleAlert;

use Filament\Forms\Components\Actions;

SimpleAlert::make('example')

    ->success()

    ->title(new HtmlString('Hoorraayy! Your request has been approved! 🎉'))

    ->description('Lorem ipsum dolor sit amet consectetur adipisicing elit.')

    ->actions([

         Action::make('filament')

            ->label('Details')

            ->icon('heroicon-m-arrow-long-right')

            ->iconPosition(IconPosition::After)

            ->link()

            ->url('https://filamentphp.com')

            ->openUrlInNewTab()

            ->color('success'),

    ]),

```

## Contributing

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

## Credits

- [CodeWithDennis](https://github.com/CodeWithDennis)

- [All Contributors](../../contributors)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.