OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav aria-label="With icons and counters" data-view-component="true" class="tabnav">
  <ul data-view-component="true" class="tabnav-tabs">
    <li data-view-component="true" class="d-inline-flex">
      <a href="#" aria-current="page" data-view-component="true" class="tabnav-tab">
        Tab 1
      </a></li>
    <li data-view-component="true" class="d-inline-flex">
      <a href="#" data-view-component="true" class="tabnav-tab">
        Tab 2
      </a></li>
    <li data-view-component="true" class="d-inline-flex">
      <a href="#" data-view-component="true" class="tabnav-tab">
        Tab 3
      </a></li>
  </ul>
  <button type="button" data-view-component="true" class="Button--secondary Button--medium Button">  <span class="Button-content">
      <span class="Button-label">Extra Button</span>
    </span>
  </button>
</nav>

No notes provided.

1
2
3
4
5
6
7
8
<%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
  <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
  <% component.with_tab(href: "#") { "Tab 2" } %>
  <% component.with_tab(href: "#") { "Tab 3" } %>
  <% component.with_extra(align: align) do %>
    <%= render(Primer::Beta::Button.new) { "Extra Button" } %>
  <% end %>
<% end %>
Param Description Input

—