Contents

<%= render(Yattho::Alpha::NavList.new(selected_item_id: :personal_info)) do |component| %>
  <% component.with_section(aria: { label: "Account settings" }) do |section| %>
    <% section.with_heading(title: "Account Settings") %>
    <% section.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") do |item| %>
      <% item.with_leading_visual_avatar(src: "https://github.com/github.png", alt: "GitHub") %>
    <% end %>
    <% section.with_item(label: "Notifications", selected_by_ids: :notifications, href: "/account/notifications") do |item| %>
      <% item.with_leading_visual_icon(icon: :bell) %>
      <% item.with_trailing_visual_counter(count: 15) %>
    <% end %>
    <% section.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") do |item| %>
      <% item.with_leading_visual_icon(icon: :package) %>
      <% item.with_trailing_visual_icon(icon: :"dot-fill", color: :attention) %>
    <% end %>
  <% end %>
<% end %>

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
yattho_view_components-0.0.1	previews/docs/alpha_nav_list_preview/leading_and_trailing_visuals.html.erb