Botyglot Components V0.0.1
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="elevate-notifications-group--bottom-left elevate-notifications-group">
  <div data-controller="notification" data-notification-target="notification" data-notification-auto-close-value="true" data-notification-delay-value="4000" role="alert" aria_live="assertive" class="elevate-notification--container">
    <div role="progressbar" aria-valuetext="Loading..." data-notification-target="progress" class="elevate-notification elevate-notification--progress--animation elevate-notification--variant--success"></div>
    <div class="elevate-notification--inner-container">
      <header class="elevate-notification--header">
        <h2 class="elevate-notification--header--title">Success</h2>
        <button data-action="notification#dismiss" type="button" class="elevate-button elevate-button--size-s elevate-button--align-center elevate-notification--dismiss-button">
          X
        </button>
      </header>
      <p class="elevate-notification--message">My custom message</p>
    </div>
  </div>
  <div data-controller="notification" data-notification-target="notification" data-notification-auto-close-value="true" data-notification-delay-value="4000" role="alert" aria_live="assertive" class="elevate-notification--container">
    <div role="progressbar" aria-valuetext="Loading..." data-notification-target="progress" class="elevate-notification elevate-notification--progress--animation elevate-notification--variant--error"></div>
    <div class="elevate-notification--inner-container">
      <header class="elevate-notification--header">
        <h2 class="elevate-notification--header--title">Error</h2>
        <button data-action="notification#dismiss" type="button" class="elevate-button elevate-button--size-s elevate-button--align-center elevate-notification--dismiss-button">
          X
        </button>
      </header>
      <p class="elevate-notification--message">Error message</p>
    </div>
  </div>
</ul>
1
2
3
4
render(Elevate::NotificationsGroupComponent.new(placement:)) do |group|
  group.with_notification(title: "Success", message: "My custom message", variant: :success, auto_close: true, close_duration: 4000)
  group.with_notification(title: "Error", message: "Error message", variant: :error, auto_close: true, close_duration: 4000)
end

No notes provided.

Param Description Input

The placement of the notification group.