Anchor ViewComponents

Pages

No matching results.

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
<div class="contents" data-controller="popover">
  <button type="button" class="btn" data-testid="menu-button" data-popover-target="button" popovertarget="action-menu-component-78b9fd18-f116-43e0-a2a3-bdc932b07200">
    Menu
  </button>
  <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="action-menu-component-78b9fd18-f116-43e0-a2a3-bdc932b07200">
    <ul>
      <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide">    <button commandfor="my-dialog" command="show-modal">Show dialog</button>
      </li>
    </ul>
  </div>
</div>
<dialog aria-labelledby="dialog-title" class="open:flex overflow-visible flex-col p-0 bg-white shadow-lg backdrop:bg-gray-950/50 w-[36rem] rounded-lg m-auto" data-controller="dialog" data-action="close->dialog#reset" data-testid="dialog-title" id="my-dialog">
  <header class="px-6 pt-6 pb-3 flex gap-4 justify-between items-center bg-white rounded-t-lg">
    <h1 id="dialog-title" data-testid="dialog-title" class="text-xl leading-6 font-semibold">Dialog Title</h1>
    <button aria-label="Close" class="text-secondary hover:text-primary" type="button" data-action="dialog#close">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>  </header>
  <div class="px-6 pt-3 flex-auto bg-white pb-6 rounded-b-lg" data-testid="dialog-body">    
    <p>Content</p>
  </div>
</dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%= anchor_action_menu do |c| %>
  <% c.with_show_button_content("Menu") %>
  <% c.with_item do %>
    <%= tag.button(
      "Show dialog",
      commandfor: "my-dialog",
      command: "show-modal",
    ) %>
  <% end %>
<% end %>
<%= anchor_dialog(
  id: "my-dialog",
  title: "Dialog Title",
) do |dialog| %>
  <% dialog.with_body do %>
    <%= tag.p "Content" %>
  <% end %>
<% end %>

No notes provided.

No params configured.