Corex.Marquee (Corex v0.1.1)

View Source

Phoenix implementation of Zag.js Marquee.

Anatomy

Minimal

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

Custom slots

<.marquee
  class="marquee"
  items={[
    %{name: "Home", icon: "hero-home"},
    %{name: "User", icon: "hero-user"},
    %{name: "Cog", icon: "hero-cog-6-tooth"}
  ]}
  duration={25}
  spacing="2rem"
  pause_on_interaction
>
  <:item :let={item}>
    <.heroicon name={item.icon} />
    <span>{item.name}</span>
  </:item>
</.marquee>

API

Requires a stable id on <.marquee>.

FunctionActionReturns
pause/1Pause animation (client)%Phoenix.LiveView.JS{}
pause/2Pause animation (server)socket
resume/1Resume animation (client)%Phoenix.LiveView.JS{}
resume/2Resume animation (server)socket
toggle_pause/1Toggle pause (client)%Phoenix.LiveView.JS{}
toggle_pause/2Toggle pause (server)socket

Events

Pick an event name and pass it to on_* on <.marquee>.

Server events

EventWhenPayload
on_pause_change="marquee_pause_changed"Pause state changes%{"id" => id, "paused" => boolean}
on_loop_complete="marquee_loop_complete"One loop finishes%{"id" => id}
on_complete="marquee_complete"All loops finish (loop_count > 0)%{"id" => id}

Client events

EventWhenevent.detail
on_pause_change_client="marquee-pause-changed"Pause state changesid, paused
on_loop_complete_client="marquee-loop-complete"One loop finishesid
on_complete_client="marquee-complete"All loops finishid

Style

Target parts with data-scope and data-part, or use Corex Design: import tokens and marquee.css, then set class="marquee" on <.marquee>.

[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"] {}
@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/marquee.css";

Stack modifiers on the host (class on <.marquee>).

Color

ModifierClasses
Defaultmarquee
Accentmarquee marquee--accent
Brandmarquee marquee--brand
Alertmarquee marquee--alert
Infomarquee marquee--info
Successmarquee marquee--success

Size

ModifierClasses
SMmarquee marquee--sm
MDmarquee marquee--md
LGmarquee marquee--lg
XLmarquee marquee--xl

Summary

Components

marquee(assigns)

API

pause(marquee_id)

Pause the marquee from a control (phx-click).

pause(socket, marquee_id)

Pause from handle_event. Pushes marquee_pause.

resume(marquee_id)

Resume the marquee from a control (phx-click).

resume(socket, marquee_id)

Resume from handle_event. Pushes marquee_resume.

toggle_pause(marquee_id)

Toggle paused state from a control (phx-click).

toggle_pause(socket, marquee_id)

Toggle pause from handle_event. Pushes marquee_toggle_pause.

Components

marquee(assigns)

Attributes

  • id (:string)
  • aria_label (:string) - Accessible name for the marquee region. Defaults to "Marquee: {id}" when omitted. Defaults to nil.
  • items (:list) (required) - List of maps for each marquee item.
  • duration (:integer) - Animation duration in seconds. Defaults to 20.
  • side (:string) - Defaults to "end". Must be one of "start", "end", "top", or "bottom".
  • speed (:integer) - Animation speed in pixels per second. Defaults to 100.
  • spacing (:string) - Spacing between items. Defaults to "1rem".
  • pause_on_interaction (:boolean) - Whether to pause the animation on interaction. Defaults to false.
  • paused (:boolean) - Whether the marquee starts paused. Defaults to false.
  • delay (:integer) - Delay before starting the animation in seconds. Defaults to 0.
  • loop_count (:integer) - Number of times to loop the animation, setting to 0 creates an infinite loop. Defaults to 0.
  • reverse (:boolean) - Whether to reverse the animation. Defaults to false.
  • respect_reduced_motion (:boolean) - When false, animation runs even when user has prefers-reduced-motion. Defaults to true.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • on_pause_change (:string) - Server event when pause status changes. Defaults to nil.
  • on_pause_change_client (:string) - Client event when pause status changes. Defaults to nil.
  • on_loop_complete (:string) - Server event when one loop completes. Defaults to nil.
  • on_loop_complete_client (:string) - Client event when one loop completes. Defaults to nil.
  • on_complete (:string) - Server event when all loops complete (finite loops only). Defaults to nil.
  • on_complete_client (:string) - Client event when all loops complete (finite loops only). Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - Accepts attributes:
    • class (:string)

API

pause(marquee_id)

Pause the marquee from a control (phx-click).

<.action phx-click={Corex.Marquee.pause("my-marquee")}>Pause</.action>
<.marquee
  id="my-marquee"
  class="marquee"
  items={[%{name: "A"}, %{name: "B"}]}
  duration={20}
  spacing="2rem"
>
  <:item :let={item}><span>{item.name}</span></:item>
</.marquee>
document.getElementById("my-marquee")?.dispatchEvent(
  new CustomEvent("corex:marquee:pause", { bubbles: false })
);

pause(socket, marquee_id)

Pause from handle_event. Pushes marquee_pause.

<.action phx-click="pause_marquee">Pause</.action>
<.marquee
  id="my-marquee"
  class="marquee"
  items={[%{name: "A"}, %{name: "B"}]}
  duration={20}
  spacing="2rem"
>
  <:item :let={item}><span>{item.name}</span></:item>
</.marquee>
def handle_event("pause_marquee", _, socket) do
  {:noreply, Corex.Marquee.pause(socket, "my-marquee")}
end

resume(marquee_id)

Resume the marquee from a control (phx-click).

<.action phx-click={Corex.Marquee.resume("my-marquee")}>Resume</.action>
<.marquee
  id="my-marquee"
  class="marquee"
  items={[%{name: "A"}, %{name: "B"}]}
  duration={20}
  spacing="2rem"
  paused
>
  <:item :let={item}><span>{item.name}</span></:item>
</.marquee>
document.getElementById("my-marquee")?.dispatchEvent(
  new CustomEvent("corex:marquee:resume", { bubbles: false })
);

resume(socket, marquee_id)

Resume from handle_event. Pushes marquee_resume.

<.action phx-click="resume_marquee">Resume</.action>
<.marquee
  id="my-marquee"
  class="marquee"
  items={[%{name: "A"}, %{name: "B"}]}
  duration={20}
  spacing="2rem"
  paused
>
  <:item :let={item}><span>{item.name}</span></:item>
</.marquee>
def handle_event("resume_marquee", _, socket) do
  {:noreply, Corex.Marquee.resume(socket, "my-marquee")}
end

toggle_pause(marquee_id)

Toggle paused state from a control (phx-click).

<.action phx-click={Corex.Marquee.toggle_pause("my-marquee")}>Toggle</.action>
<.marquee
  id="my-marquee"
  class="marquee"
  items={[%{name: "A"}, %{name: "B"}]}
  duration={20}
  spacing="2rem"
>
  <:item :let={item}><span>{item.name}</span></:item>
</.marquee>
document.getElementById("my-marquee")?.dispatchEvent(
  new CustomEvent("corex:marquee:toggle-pause", { bubbles: false })
);

toggle_pause(socket, marquee_id)

Toggle pause from handle_event. Pushes marquee_toggle_pause.

<.action phx-click="toggle_marquee">Toggle</.action>
<.marquee
  id="my-marquee"
  class="marquee"
  items={[%{name: "A"}, %{name: "B"}]}
  duration={20}
  spacing="2rem"
>
  <:item :let={item}><span>{item.name}</span></:item>
</.marquee>
def handle_event("toggle_marquee", _, socket) do
  {:noreply, Corex.Marquee.toggle_pause(socket, "my-marquee")}
end