Contents

<%= render(Primer::Alpha::NavList.new) do |list| %>
  <% list.with_group do |group| %>
    <%= group.with_heading(title: "Shopping list") %>
    <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
    <% end %>
    <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>
    <% end %>
  <% end %>
<% end %>

<script type="text/javascript" data-eval="true">
  const breadButton = document.querySelector("[name=bread_button]")
  breadButton.addEventListener("click", () => alert("You selected bread."))

  const cheeseButton = document.querySelector("[name=cheese_button]")
  cheeseButton.addEventListener("click", () => alert("You selected cheese."))
</script>

Version data entries

6 entries across 6 versions & 1 rubygems

Version	Path
primer_view_components-0.1.7	previews/primer/alpha/nav_list_preview/trailing_action.html.erb
primer_view_components-0.1.6	previews/primer/alpha/nav_list_preview/trailing_action.html.erb
primer_view_components-0.1.5	previews/primer/alpha/nav_list_preview/trailing_action.html.erb
primer_view_components-0.1.4	previews/primer/alpha/nav_list_preview/trailing_action.html.erb
primer_view_components-0.1.3	previews/primer/alpha/nav_list_preview/trailing_action.html.erb
primer_view_components-0.1.2	previews/primer/alpha/nav_list_preview/trailing_action.html.erb