Dialog

Modal schmodal

Includes a Ruby component and corresponding Rails helper

Ruby

Includes a Stimulus controller

Stimulus

Example

<%= nk_dialog do |d| %>
  <%= d.trigger "New post" %>
  <%= d.dialog do %>
    <%= d.title "New post" %>
    <%= d.description "Start off your new post with a tantilizing promise that your article can't live up to." %>

    <%= nk_form_for Post.new, url: "#" do |f| %>
      <div class="grid gap-6">
        <%= f.group do %>
          <%= f.field :title %>
        <% end %>

        <div class="flex justify-end space-x-2">
          <%= nk_ghost_button "Cancel", data: { action: "nk--dialog#close" } %>
          <%= f.submit "Save post" %>
        </div>
      </div>
    <% end %>

    <%= d.close_button %>
  <% end %>
<% end %>

<%= nk_dialog do |d| %>
  <%= d.trigger "New post" %>
  <%= d.dialog do %>
    <%= d.title "New post" %>
    <%= d.description "Start off your new post ..." %>

    <%= nk_form_for ... do %>
      ...
    <% end %>

    <%= d.close_button %>
  <% end %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:component dialog

Files generated

Usage

`nk_dialog(**attrs) { \|dialog\| ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<div>` element

`dialog.trigger(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		Arguments for `NitroKit::Button.new()`

`dialog.dialog(**attrs) { ... }`
Property	Default	Description
`**attrs`		HTML attributes for `<dialog>` element

`dialog.close_button(**attrs) { ... }`
Property	Default	Description
`**attrs`		Arguments for `NitroKit::Button.new()`

`dialog.title(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<h2>` element

`dialog.description(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<div>` element