Phoenix implementation of Zag.js Marquee.

Examples

<.marquee
  id="logos"
  items={[%{name: "Apple", logo: "🍎"}, %{name: "Banana", logo: "🍌"}]}
  duration={20}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={%{item: item}}>
    <span>{item.logo}</span>
    <span>{item.name}</span>
  </:item>
</.marquee>

Styling

Target elements via data attributes:

[data-scope="marquee"][data-part="root"] {}
[data-scope="marquee"][data-part="viewport"] {}
[data-scope="marquee"][data-part="content"] {}
[data-scope="marquee"][data-part="item"] {}
[data-scope="marquee"][data-part="edge"] {}

If you wish to use the default Corex styling, you can use the class marquee on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/marquee.css";

You can then use modifiers

<.marquee class="marquee marquee--accent marquee--lg">

API Control

Use an id on the component for programmatic control.

Client-side

<.action phx-click={Corex.Marquee.pause("my-marquee")}>Pause</.action>
<.action phx-click={Corex.Marquee.resume("my-marquee")}>Resume</.action>
<.action phx-click={Corex.Marquee.toggle_pause("my-marquee")}>Toggle</.action>

Server-side

def handle_event("pause_marquee", _, socket) do
  {:noreply, Corex.Marquee.pause(socket, "my-marquee")}
end

Events

• on_pause_change / on_pause_change_client - when pause status changes (detail: %{paused: boolean})
• on_loop_complete / on_loop_complete_client - when one loop completes
• on_complete / on_complete_client - when all loops complete (finite loops only, loop_count > 0)