LycanUI
Dialog
Displays a menu to the user, which contains links or actions.
<%= ui.dialog do |dialog| %>
<%= dialog.trigger 'Open' %>
<%= dialog.content class: 'sm:max-w-[425px]' do %>
<%= dialog.header do %>
<%= dialog.title 'Edit Profile' %>
<%= dialog.description "Make changes to your profile here. Click save when you're done." %>
<% end %>
<fieldset>
<%= ui.label nil, :name, 'Name' %>
<%= ui.input nil, :name, type: 'text', placeholder: 'Type here...' %>
</fieldset>
<fieldset>
<%= ui.label nil, :username, 'Username' %>
<%= ui.input nil, :username, type: 'text', placeholder: 'Type here...' %>
</fieldset>
<%= dialog.footer do %>
<%= ui.button 'Save Changes' %>
<% end %>
<% end %>
<% end %>
Installation
rails g lycan_ui:add dialog
Features
-
Fully managed focus
-
Esc automatically closes the dialog
Usage
Usage with forms
To work with forms within your dialog, simply use the form method.
Note: This demo is a bit odd, since the form action will always fail.
<%= ui.dialog do |dialog| %>
<%= dialog.trigger 'Open' %>
<%= dialog.content class: 'sm:max-w-[425px]' do %>
<%= dialog.header do %>
<%= dialog.title 'Edit Profile' %>
<%= dialog.description "Make changes to your profile here. Click save when you're done." %>
<% end %>
<%= dialog.form url: '/' do |form| %>
<fieldset>
<%= form.label :name, 'Name' %>
<%= form.text_field :name, placeholder: 'Type here...' %>
</fieldset>
<fieldset>
<%= form.label :username, 'Username' %>
<%= form.text_field :username, placeholder: 'Type here...' %>
</fieldset>
<%= dialog.footer do %>
<%= form.button 'Save Changes' %>
<% end %>
<% end %>
<% end %>
<% end %>
Remote Dialogs
A common pattern with Turbo is server rendering Dialogs into a Turbo Frame. We support this out of the box
by passing remote: true to ui.dialog.
This does two of things:
- Wraps the dialog in a Turbo Frame with name
dialog - Disallows the use of the
triggerslot
<%# app/views/layouts/application.html.erb %>
<%= turbo_frame_tag :dialog %>
<%# Wherever you want to trigger your dialog, don't forget your aria attributes :) %>
<%= ui.button as_child: true, aria: { controls: 'cool-remote-form' } do |attributes| %>
<%= link_to 'Open', '/edit_dialog_example', data: { turbo_frame: :dialog }, **attributes %>
<% end %>
<%# app/views/profiles/edit.html.erb %>
<%= ui.dialog remote: true, id: 'cool-remote-form' do |dialog| %>
<%# Note: we don't use a `dialog.trigger` here since the `link_to` is the trigger. %>
<%= dialog.content class: 'sm:max-w-[425px]' do %>
<%= dialog.header do %>
<%= dialog.title 'Edit Favorite Show' %>
<%= dialog.description "Make changes to your favorite show. Click save when you're done." %>
<% end %>
<%= dialog.form url: '/' do |form| %>
<fieldset>
<%= form.label :name, 'Favorite Show' %>
<%= form.text_field :name, placeholder: 'Type here...' %>
</fieldset>
<%= dialog.footer do %>
<%= form.button 'Save Changes' %>
<% end %>
<% end %>
<% end %>
<% end %>