Anchor ViewComponents

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<nav aria-label="Accessible label" class="shadow-[inset_0_-1px] shadow-gray-300 pb-1">
  <ul class="flex gap-8">
    <li><a aria-current="page" class="inline-block py-4 text-base font-semibold relative after:h-1 after:absolute after:-bottom-1 after:inset-x-0 after:rounded-sm text-primary after:bg-accent" href="#">Tab 1</a>
    </li>
    <li><a class="inline-block py-4 text-base font-semibold relative after:h-1 after:absolute after:-bottom-1 after:inset-x-0 after:rounded-sm text-secondary hover:text-primary hover:after:bg-gray-500" href="#">Tab 2</a>
    </li>
    <li><a class="inline-block py-4 text-base font-semibold relative after:h-1 after:absolute after:-bottom-1 after:inset-x-0 after:rounded-sm text-secondary hover:text-primary hover:after:bg-gray-500" href="#">Tab 3</a>
    </li>
  </ul>
</nav>
1
2
3
4
5
anchor_tab_bar(label:) do |c|
  Array.new(number_of_tabs || 3) do |i|
    c.with_tab(href: "#", active: i.zero?).with_content("Tab #{i + 1}")
  end
end

No notes provided.

Param Description Input

A brief description of the purpose of the navigation, omitting the term ‘navigation’, as the screen reader will read both the role and the contents of the label.

—