Laravel 中使用 Bootstrap Toasts 代替 Bootstrap 警报

Answer 1

@if(Session::has('message'))

<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="toast" class="toast align-items-center text-bg-info text-white rounded-0" role="toast" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">
              {{session('message')}}
              <i class="far fa-face-smile"></i>
           </div>
             <button type="button" class="btn-close me-2 m-auto"  data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
   </div>
</div>

@endif

这会对你有帮助 当你传递 flash 消息时，总是尝试使用 session() 和会话的密钥，例如消息或错误。

Answer 2

将其添加到您的基本布局或视图中：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

为您的 Toast 消息创建新的刀片视图 -

toast.blade.php

。

<div class="toast align-items-center text-bg-info text-white rounded-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
        <div class="toast-body">
            {{ $message }}
        </div>
        <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
</div>

使用

with()

传递 toast 消息。

return view('your-view')->with('message', 'This is a toast message.');

将此添加到您想要显示 toast 消息的位置：

@if(session('message'))
    @include('toast')
@endif

要显示toast，可以使用JS。 Bootstrap 5.3 toast 需要触发 JavaScript。

<script>
    $(document).ready(function() {
        // Get the toast element by its ID
        var toastElement = document.getElementById('toast');

        // Create a new Bootstrap Toast instance
        var toast = new bootstrap.Toast(toastElement);

        // Show the toast
        toast.show();
    });
</script>