Features
Notification
The notification component is based on a item to show overtop of all other components in a site. This supports the ability to be manually cleared and/or auto dismissed based on a given wait time.
Playground
Want to see them in action? Check out the examples here for the ability to play with notifications.
Attributes
Targets
Attribute | Type | Required | Details | Syntax |
---|---|---|---|---|
container | String | true | Target for the container of the Notification instance | data-notification-target="container" |
Classes
Attribute | Required | Details | Syntax |
---|---|---|---|
entering | true | Detail classes for entering base | data-notification-entering-class="transform ease-out duration-300 transition" |
enteringTo | true | Detail classes for entering to | data-notification-entering-to-class="translate-y-0 opacity-100 sm:translate-x-0" |
enteringFrom | true | Detail classes for entering from | data-notification-entering-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2" |
leaving | true | Detail classes for leaving base | data-notification-leaving-class="transition ease-in duration-100" |
leavingTo | true | Detail classes for leaving to | data-notification-leaving-to-class="opacity-0" |
leavingFrom | true | Detail classes for leaving from | data-notification-leaving-from-class="opacity-100" |
Values
Attribute | Type | Default | Required | Details | Syntax |
---|---|---|---|---|---|
autoDismiss | Boolean | false | false | Used to activate a notification to auto dismiss | data-notification-auto-dismiss-value="true" |
dismissAfter | Number | 4000 | false | Used in compainion to autoDismiss to indicate when to auto hide | data-notification-dismiss-after-value="4000" |
enterTimeout | Number | 1000 | false | Used to change the animation of the notification appearing | data-notification-enter-timeout-value="1200" |
leaveTimeout | Number | 1000 | false | Used to change the animation of the notification leaving | data-notification-leave-timeout-value="1200" |
Methods
Actions
Function | Details | Syntax |
---|---|---|
close() | This close button will dismiss the notification and remove it from the DOM | data-action="notification#close" |
Basic Usage
The Notification Component supports the ability to define the entering and exiting affect that the element goes trough showing and hiding. This also supports the ability to auto dismiss the notification after x amount of milliseconds and the ability to click a button to dismiss the notification. When a notification is dismissed via Manual or Auto it will remove the notification from the DOM.
Both Auto and Manual
This option supports the following options:
- [x] Manual Dismiss
- [x] Auto Dismiss
<div
aria-live="assertive"
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
>
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
<div
data-controller="notification"
data-notification-target="container"
data-notification-auto-dismiss-value="true"
data-notification-dismiss-after-value="4000"
data-notification-entering-class="transform ease-out duration-300 transition"
data-notification-entering-to-class="translate-y-0 opacity-100 sm:translate-x-0"
data-notification-entering-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
data-notification-leaving-class="transition ease-in duration-100"
data-notification-leaving-to-class="opacity-0"
data-notification-leaving-from-class="opacity-100"
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
>
<div class="p-4">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">Successfully!</p>
<p class="mt-1 text-sm text-gray-500">
I am a Notification with Auto Dismiss and Manual Dismiss
</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button
data-action="notification#close"
type="button"
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span class="sr-only">Close</span>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Manually Dismissed
This option supports the following options:
- [x] Manual Dismiss
- [ ] Auto Dismiss
<div
aria-live="assertive"
class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
>
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
<div
data-controller="notification"
data-notification-target="container"
data-notification-entering-class="transform ease-out duration-300 transition"
data-notification-entering-to-class="translate-y-0 opacity-100 sm:translate-x-0"
data-notification-entering-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
data-notification-leaving-class="transition ease-in duration-100"
data-notification-leaving-to-class="opacity-0"
data-notification-leaving-from-class="opacity-100"
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
>
<div class="p-4">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">Successfully!</p>
<p class="mt-1 text-sm text-gray-500">
I am a Notification< without Auto Dismiss and with Manual Dismiss/p>
</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button
data-action="notification#close"
type="button"
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span class="sr-only">Close</span>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Auto Dimissible
This option supports the following options:
- [ ] Manual Dismiss
- [x] Auto Dismiss
<div aria-live="assertive" class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start">
<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
<div data-controller="notification"
data-notification-target="container"
data-notification-auto-dismiss-value="true"
data-notification-dismiss-after-value="4000"
data-notification-entering-class="transform ease-out duration-300 transition"
data-notification-entering-to-class="translate-y-0 opacity-100 sm:translate-x-0"
data-notification-entering-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
data-notification-leaving-class="transition ease-in duration-100"
data-notification-leaving-to-class="opacity-0"
data-notification-leaving-from-class="opacity-100"
class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
<div class="p-4">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">Successfully!</p>
<p class="mt-1 text-sm text-gray-500">I am a Notification with Auto Dismiss and without Manual Dismiss</p>
</div>
</div>
</div>
</div>
</div>
</div>
View Component Usage
In Rails you can use a gem called View Components to enable the ability to template components usage. Check out View Components site for further details on how to setup in your Rails project.
Notification Component
./app/components/notification.html.erb
<div
data-controller="notification"
data-notification-target="container"
data-notification-auto-dismiss-value="<%= auto_dismiss %>"
data-notification-dismiss-after-value="4000"
data-notification-entering-class="transform ease-out duration-300 transition"
data-notification-entering-to-class="translate-y-0 opacity-100 sm:translate-x-0"
data-notification-entering-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
data-notification-leaving-class="transition ease-in duration-100"
data-notification-leaving-to-class="opacity-0"
data-notification-leaving-from-class="opacity-100"
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
>
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg
xmlns="http://www.w3.org/2000/svg"
class="<%= TYPES[type][:color] %> h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<% if TYPES[type][:icon] == "error" %>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
<% end %> <% if TYPES[type][:icon] === "success" %>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
<% end %>
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900"><%= TYPES[type][:label] %></p>
<p class="mt-1 text-sm text-gray-500"><%= content %></p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button
data-action="notification#close"
type="button"
class="inline-flex rounded-md bg-white text-gray-400 transition duration-150 ease-in-out hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span class="sr-only">Close</span>
<svg
class="h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
./app/components/notification_component.rb
class NotificationComponent < ViewComponent::Base
TYPES = {
notice: {
color: "text-green-500",
icon: "success",
label: "Successful!"
},
alert: {
color: "text-red-500",
icon: "error",
label: "Error Occured!"
}
}.freeze
def initialize(type:, auto_dismiss:) # rubocop:disable Lint/MissingSuper
@type = type
@auto_dismiss = auto_dismiss
end
attr_reader :type, :auto_dismiss
end
./app/views/layout/refs/_navigation.html.erb
<div aria-live="assertive" class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start">
<div class="w-full flex flex-col items-center space-y-4 sm:items-end">
<% flash.each do |type, msg| %> <%= render(NotificationComponent.new(type: type.to_sym, auto_dismiss: false )) do %> <%= msg %> <% end %> <% end %>
</div>
</div>
./app/views/layout/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Example App</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
</head>
<body>
<main class="container mx-auto mt-28 px-5 flex"><%= yield %></main>
<%= render "layouts/refs/notifications" %>
</body>
</html>