Toast Notification Component with Flexible Positioning

Info Generate Packages

The code defines a ToastComponent class that inherits from ApplicationComponent, intended for creating a user interface component, specifically a toast notification. This component, when rendered, displays a message in a div element styled with the 'toast' class. Additionally, it contains another div with the 'alert alert-info' class, which further contains a span element with the text "New message arrived." This setup is aimed at informing the user of a new message in a visually distinct manner. The comment at the beginning indicates that the toast component's position can be manipulated by adding specific classes such as 'toast-start', 'toast-center', 'toast-end', 'toast-top', 'toast-middle', and 'toast-bottom', allowing for flexible placement of the toast notification within the user interface.

# frozen_string_literal: true

# Toast component position can be modified by adding one of the following classes:
# toast-start, toast-center, toast-end, toast-top, toast-middle, toast-bottom

class ToastComponent < ApplicationComponent
  def template
    div(class: "toast") do
      div(class: "alert alert-info") do
        span { "New message arrived." }
      end
    end
  end
end

Try a prompt