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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="flex flex-col min-h-screen" data-testid="page-component">
  <header class="py-6" data-testid="page-header">
    <div class="flex flex-col gap-8">
      <div class="px-10"><nav aria-label="Breadcrumb" data-testid="breadcrumbs">
          <ol class="flex items-center">
            <li class="flex text-sm items-center text-secondary whitespace-nowrap">
              <a class="underline hover:no-underline focus:no-underline text-secondary hover:text-primary" href="#">Breadcrumb 1</a>
            </li>
            <li aria-current="page" class="flex text-sm items-center text-secondary whitespace-nowrap">
              <span aria-hidden="true" class="mx-2">/</span>
              Breadcrumb 2
            </li>
          </ol>
        </nav></div>
      <div class="px-10 flex justify-between items-center min-h-10">
        <div class="space-y-1">
          <div class="flex items-center gap-2">
            <h1 class="text-2xl leading-7 font-semibold">Page title</h1>
          </div>
        </div>
        
        <div class="flex items-center gap-2">
        </div>
      </div>
    </div>
  </header>
  <div class="px-10 py-6 grow" data-testid="page-body">    
    <div class="max-w-lg mx-auto">
      <div class="border border-subdued" data-testid="panel-component" title="Unit status">
        <div class="border-subdued px-6 py-4 border-b" data-testid="panel-header">
          <p class="text-sm leading-4 font-bold uppercase">Step</p>
        </div>
        <div class="p-6" data-testid="panel-body">
          <div class="h-40">
            <form id="form" class="flex flex-col gap-4" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="VTcf0cGntQ-O3N86tXEMYcbNL5pTLeZAI11SXhbJSEheAKGTbkS8Y4lbS92Jw5O_jeLdFs4OQuAg41nmKc9Y5Q" autocomplete="off" />
              The form
            </form>
          </div>
        </div>
        <div class="border-t border-subdued flex items-center pt-4 pb-6 mx-6" data-testid="panel-footer">
          <div class="ml-auto" data-testid="panel-actions">
            <button type="submit" class="btn-small btn btn-primary" data-testid="save-button" form="form">
              Save
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer class="px-10 py-5 flex items-center justify-end gap-4 border-t bg-white border-subdued sticky bottom-0" data-testid="page-footer">
    <a href="#" class="btn btn-primary" data-testid="done-button">
      Done
    </a>
  </footer>
</div>
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
27
28
29
<%= anchor_page do |page| %>
  <% page.with_header do |header| %>
    <% header.with_breadcrumbs do |breadcrumbs| %>
      <% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 1") %>
      <% breadcrumbs.with_item_content("Breadcrumb 2") %>
    <% end %>
    <% header.with_title("Page title") %>
  <% end %>
  <% page.with_body do %>
    <div class="max-w-lg mx-auto">
      <%= anchor_panel(title: "Unit status", active: true) do |panel| %>
        <% panel.with_header_content("Step") %>
        <%= panel.with_body do %>
          <div class="h-40">
            <%= anchor_form_with(url: false, id: "form") do |form| %>
              The form
            <% end %>
          </div>
        <% end %>
        <%= panel.with_footer do |footer| %>
          <%= footer.with_primary_action(label: "Save", form: "form") %>
        <% end %>
      <% end %>
    </div>
  <% end %>
  <% page.with_footer do |footer| %>
    <% footer.with_done_button(href: "#") %>
  <% end %>
<% end %>

No notes provided.

No params configured.