You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.6 KiB
85 lines
3.6 KiB
<div>
|
|
<h1 class="font-bold text-4xl">Try out our Rails 8 Flash rendering</h1>
|
|
</div>
|
|
|
|
<section>
|
|
<h2 class="text-bold text-2xl">By using <span class="italic">redirect_to</span></h2>
|
|
<ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'Notice',
|
|
notification_show_notice_path,
|
|
class: 'btn btn-primary',
|
|
data: { turbo_prefetch: false }%>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'Notice ++', notification_show_notice_path({multiple: true}), class: 'btn btn-primary', 'data-turbo-prefetch': false %>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'Alert', notification_show_alert_path, class: 'btn btn-secondary', 'data-turbo-prefetch': false %>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'Alert ++', notification_show_alert_path({multiple: true}), class: 'btn btn-secondary', 'data-turbo-prefetch': false %>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'None', notification_index_path, class: 'btn btn-accent btn-outline', 'data-turbo-prefetch': false %>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 class="text-bold text-2xl">By using <span class="italic">turbo stream</span></h2>
|
|
<ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to notification_turbo_notice_path, class: "btn btn-primary", data: { turbo_stream: true, turbo_prefetch: false } do %>
|
|
Turbo Notice
|
|
<% end %>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to notification_turbo_alert_path, class: "btn btn-secondary", data: { turbo_stream: true, turbo_prefetch: false } do %>
|
|
Turbo Alert
|
|
<% end %>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to notification_turbo_more_path, class: "btn btn-accent", data: { turbo_stream: true, turbo_prefetch: false } do %>
|
|
Turbo More
|
|
<% end %>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to notification_turbo_none_path, class: "btn btn-accent btn-outline", data: { turbo_stream: true, turbo_prefetch: false } do %>
|
|
Turbo None
|
|
<% end %>
|
|
</li>
|
|
</ul>
|
|
|
|
<%# <div class="flex gap-4">
|
|
<div class="flex-1 flex-col">
|
|
<h3 class='m-2'>Choice</h3>
|
|
<div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
|
|
</div>
|
|
|
|
<div class="flex-none divider sm:divider-horizontal grow-0">OR</div>
|
|
<div class="flex-1 flex-col">
|
|
<h3 class='m-2'>Selected</h3>
|
|
<div class="grow card h-50 bg-base-300 rounded-box place-items-center">content</div>
|
|
</div>
|
|
|
|
</div> %>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 class="text-bold text-2xl">By using plain <span class="italic">Javascript</span></h2>
|
|
<ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'Notice', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
|
|
type: 'notice',
|
|
message: 'this is a message from within Stimulus'
|
|
}}))", class: 'btn btn-primary'%>
|
|
</li>
|
|
<li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
|
|
<%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
|
|
type: 'alert',
|
|
message: 'this is an alert by the way'
|
|
}}))", class: 'btn btn-secondary'%>
|
|
</li>
|
|
</ul>
|
|
</section>
|