The Phoenix UI with API, Events, Anatomy, Design, and Accessibility. The Phoenix UI with Accessibility. API. Events. Anatomy. Design. Accessibility.

    <.accordion class="accordion" value="lorem" items={@items}>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

  

    items =
  Corex.Content.new([
    %{
      value: "lorem",
      label: "Lorem ipsum dolor sit amet",
      content: "Consectetur adipiscing elit."
    },
    %{
      value: "duis",
      label: "Duis dictum gravida odio ac pharetra?",
      content: "Nullam eget vestibulum ligula."
    }
  ])

  

    <.accordion class="accordion" value="lorem">
  <:trigger value="lorem">
    <.heroicon name="hero-chat-bubble-left-right" /> Lorem ipsum dolor sit amet
  </:trigger>
  <:content value="lorem">
    <p>Consectetur adipiscing elit. Sed sodales ullamcorper tristique.</p>
  </:content>
  <:indicator value="lorem">
    <.heroicon name="hero-chevron-right" />
  </:indicator>

  <:trigger value="duis">
    <.heroicon name="hero-device-phone-mobile" /> Duis dictum gravida odio
  </:trigger>
  <:content value="duis">
    <p>Nullam eget vestibulum ligula, at interdum tellus.</p>
  </:content>
  <:indicator value="duis">
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

  

    <.accordion class="accordion" value="server" items={@items}>
  <:trigger :let={item}>
    <span class="inline-flex -space-x-2">
      <img
        :for={tech <- item.meta.tech}
        src={tech.src}
        alt={tech.alt}
        class="size-6 rounded-full ring-2 ring-surface"
      />
    </span>
    {item.label}
  </:trigger>
  <:content :let={item}><p>{item.content}</p></:content>
  <:indicator>
    <.heroicon name="hero-chevron-right" />
  </:indicator>
</.accordion>

  

    items =
  Corex.Content.new([
    %{
      value: "server",
      label: "Server stack",
      content: "Elixir, Phoenix, and Ecto on the server.",
      meta: %{
        tech: [
          %{name: "Elixir", alt: "Elixir", src: "/images/tech/elixir.svg"},
          %{name: "Phoenix", alt: "Phoenix", src: "/images/tech/phoenix.svg"},
          %{name: "Ecto", alt: "Ecto", src: "/images/tech/ecto.png"}
        ]
      }
    },
    %{
      value: "client",
      label: "Client machine",
      content: "Zag.js and TypeScript in the browser.",
      meta: %{
        tech: [
          %{name: "Zag.js", alt: "Zag.js", src: "/images/tech/zag.webp"},
          %{name: "TypeScript", alt: "TypeScript", src: "/images/tech/typescript.svg"},
          %{name: "Tailwind CSS", alt: "Tailwind CSS", src: "/images/tech/tailwind.svg"}
        ]
      }
    }
  ])