gw1nblayd/livewire-gtoaster

为您的 Laravel Livewire 应用程序提供 Toasters

0.1.0 2024-07-17 09:28 UTC

This package is auto-updated.

Last update: 2024-09-19 15:19:26 UTC


README

Livewire G-Toaster

为您的 Laravel Livewire 应用程序提供简约的 Toasters

版本兼容性

安装

步骤 1

composer require gw1nblayd/livewire-gtoaster

步骤 2

转到 resources/js/app.js 并添加以下行

import GToaster from '../../vendor/gw1nblayd/livewire-gtoaster/src/resource/js/GToaster.js';


// All parameters are optional
GToaster.setParams({
  // Can be 'top-right', 'top-left', 'bottom-right', 'bottom-left'
  position: 'bottom-right',

  // Time in milliseconds
  timer: 3000,

  // Can be 'none', 'fade'
  animation: 'none',

  // Can be 'flat', 'blank'
  style: 'flat',

  // Can be 'dark', 'light'
  theme: 'dark',

  // Show icons in toasts
  showIcons: true,
});

步骤 3

@gtoast 指令添加到您的主布局文件。

示例: resources/views/layouts/app.blade.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>G-Toaster</title>
</head>
<body>

@gtoast
</body>
</html>

如何使用?

在您的 Livewire 组件中

<?php
declare(strict_types=1);

namespace App\Livewire;

use Gw1nblayd\GToaster\Livewire\Traits\GToaster;
use Illuminate\View\View;
use Livewire\Component;

class TestComponent extends Component
{
    use GToaster;

    public function submit(): void
    {
        $this->toastSuccess('All is good');
        $this->toastError('Something went wrong');
        $this->toastInfo('Just an info message');
        $this->toastWarning('Be careful!');
    }
}

示例

许可证

MIT 许可证 (MIT)。请参阅许可证文件获取更多信息。