在 Laravel 中创建可定制的 UI 警报

v1.1.0 2024-08-05 15:00 UTC

This package is auto-updated.

Last update: 2024-09-05 16:23:30 UTC


README

在 Laravel 中创建可定制的 UI 警报。

要求

  • PHP >= 8.1
  • Laravel >= 9.0

安装

通过 Composer 安装此包

composer require mayankjanidev/alert

基本用法

use Mayank\Alert\Alert;

Alert::info()->create();

使用 blade 组件显示警报

<x-alert />

// if needed, add your own classes
<x-alert class="mb-4 max-w-lg" />

自定义警报消息

Alert::info()->description('Profile updated.')->create();

alert_message

为您的警报添加标题(可选)

Alert::info()->title('Account Updated')->description('Your profile details were successfully updated.')->create();

alert_message_with_title

配置

虽然这是完全可选的,但您可以发布配置文件来自定义以下设置

  • session_key 用于在会话中设置警报消息。默认为 alert
  • theme 用于设置警报消息的样式。默认为 default
php artisan vendor:publish --provider=Mayank\Alert\ServiceProvider --tag=config

样式

此包不依赖于任何外部 CSS 或 JS,应无需任何设置即可直接使用。但是,您可以通过发布视图来自定义默认设计。

php artisan vendor:publish --provider=Mayank\Alert\ServiceProvider --tag=views

TailwindCSS

如果您已经安装了 TailwindCSS,此包提供特定的 Tailwind 设计。

更新配置以切换到 Tailwind。

// config/alert.php

return [
    'theme' => 'tailwind'
];

还添加 tailwind 配置文件的路径,以便在构建 app.css 文件时不会清除类。

// tailwind.config.js

content: [
    ...
    "./vendor/mayankjanidev/alert/resources/views/components/tailwind/*.blade.php",
],

您还可以通过发布其视图来自定义 Tailwind 设计

php artisan vendor:publish --provider=Mayank\Alert\ServiceProvider --tag=tailwind

警报类型

目前支持 4 种类型:信息、成功、警告和失败。使用方法如下

Alert::info()->create();
Alert::success()->create();
Alert::warning()->create();
Alert::failure()->create();

alert_message_info alert_message_success alert_message_warning alert_message_failure

自定义警报类型

使用 custom() 方法创建自己的警报类型。

Alert::custom('danger')->create();

请确保在 resources.views.vendor.alert.components.danger 创建适当的视图文件

模型警报

管理应用程序中针对模型特定事件(如创建、更新和删除)的警报可能会感觉重复。使用 model() 方法自动管理。

use App\Models\Post;

$post = $post->save();

Alert::model($post)->create();

这将输出 "Post was updated."。

alert_model_updated

对于创建和删除事件,也将显示类似的消息。它将自动检测模型的状态。

自定义模型警报的文本

发布语言文件并按您的喜好自定义它。

php artisan vendor:publish --provider=Mayank\Alert\ServiceProvider --tag=lang
// lang/vendor/alert/en/messages.php

return [
    'model' => [
        'created' => [
            'description' => ':model_name was created.',
        ],
        'updated' => [
            'description' => ':model_name was updated.',
        ],
        'deleted' => [
            'description' => ':model_name was deleted.',
        ]
    ],
];

您还可以覆盖特定模型的文本

// lang/vendor/alert/en/messages.php

return [
    'post' => [
        'created' => [
            'description' => 'Post was successfully published.',
        ],
        'updated' => [
            'description' => 'Post was successfully updated.',
        ],
        'deleted' => [
            'description' => 'Post was sent to trash.',
        ]
    ],
];

标题也支持模型警报

// lang/vendor/alert/en/messages.php

return [
    'model' => [
        'created' => [
            'title' => ':model_name Created.',
            'description' => ':model_name was created.'
        ],
    ],
];

自定义模型警报的操作

如果您在模型上执行了除创建、更新或删除之外的自定义操作,则可以使用 action() 方法指定它。

Alert::model($post)->action('bookmarked')->create();
// lang/vendor/alert/en/messages.php

return [
    'post' => [
        'bookmarked' => [
            'description' => 'Post was added to bookmarks.',
        ],
    ],
];

自定义语言参数

如果模型具有具有相同名称的属性,则自动填充语言参数。您仍然可以使用 lang() 方法手动指定语言参数。

Alert::model($post)->action('bookmarked')->lang(['title' => $post->title])->create();
// lang/vendor/alert/en/messages.php

return [
    'post' => [
        'updated' => [
            'description' => 'Post :title was updated.',
        ],
    ],
];

自定义实体警报

如果您想在自定义实体上使用与模型警报相同的特性,请使用 for() 方法。

Alert::for('settings')->action('profile_updated')->create();
// lang/vendor/alert/en/messages.php

return [
    'settings' => [
        'profile_updated' => [
            'description' => 'Your profile details were updated.',
        ]
    ]
];

对于自定义实体警报,模型警报的所有功能(如语言文件、自定义操作和语言参数)的行为方式相同。

元数据

您可以为警报添加额外的元数据。良好的用例可以是链接。

Alert::for('order')->action('completed')->meta(['track_order_link' => 'https://example.com'])->create();

JS 框架

尽管此包不提供针对 vue 或 react 等框架的 JS 组件,但您仍然可以使用警报数据构建自己的组件。

使用 json() 方法获取当前警报数据的 JSON 对象。

<alert :message="{{ Alert::json() }}"></alert>

许可证

此包根据 MIT 许可证 发布。