Ir al contenido
sebs7n-ui2.10.0
Contenido y datos

Marquee

Una fila de logos o nombres que se desplaza sola en bucle cuando no entra en el ancho, como la de clientes de una home. Si entra, queda quieta y centrada.

Ver como .mdVer el código
import { Marquee } from "sebs7n-ui/marquee"

Ejemplos

Clientes

Si no entran en el ancho, pasan en bucle; se pausa con el puntero encima o con el botón, y con foco en un link queda quieta. Con movimiento reducido queda quieta y se scrollea a mano.

import { Marquee } from "sebs7n-ui/marquee"

function Clients() {
  return <Marquee aria-label="Clientes que facturan con nosotros" className="w-full" items={items} />
}

Pocos, quietos

Si entran, la fila queda quieta y centrada: no hay nada que mover.

import { Marquee } from "sebs7n-ui/marquee"

function Few() {
  return <Marquee aria-label="Clientes destacados" className="w-full" items={items.slice(0, 3)} />
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Marquee

Hereda las props de <div>.

PropTipoPor defectoDescripción
aria-label*string—El nombre de la lista, que no se ve: «Clientes».
items*MarqueeItem[]—Los ítems de la fila, en orden.
labelsPartial<MarqueeLabels>—Textos del botón de pausa: pause y play. Los que vienen por defecto son marqueeLabels.
pauseControl"button" | "press""button"Cómo se pausa. button (por defecto): el botón de pausa al costado. press: tocar la franja la pausa y tocarla de nuevo la reanuda; el botón sigue estando para teclado y lector de pantalla, pero no se ve hasta tener el foco (2.2.2 pide un control, no que se vea siempre).
speednumber40La velocidad del bucle, en píxeles por segundo. Por defecto, 40: la misma sensación con 4 logos que con 10.
variant"logos" | "cards""logos"logos (por defecto): ítems de 44 de alto, centrados. cards: ítems que son cards, estirados a la altura del más alto.
classNamestring—Se fusiona con las clases del componente vía cn() (tailwind-merge): lo que pongas gana.

Teclado

Tab
Recorre los links de la fila una sola vez; con foco en un link, la fila queda quieta y se scrollea hasta él.
Enter · Espacio
En el botón de pausa, detiene o reanuda el bucle.

Accesibilidad

  • La fila es una lista con nombre (aria-label, obligatorio). La tanda copia del bucle va con aria-hidden e inert: el lector y Tab no la recorren.
  • En bucle trae un botón visible «Pausar» / «Reanudar» (WCAG 2.2.2): el hover no existe en un celular. Se pausa también con el puntero sobre los ítems y fuera de pantalla; la pausa del botón dura hasta «Reanudar», que la vuelve a mover aunque el botón siga con el foco.
  • Con foco en un link deja de moverse y pasa a scroll a mano, así el link enfocado queda a la vista y sin cortar (WCAG 2.4.7 y 2.4.11). Con prefers-reduced-motion no se mueve: si desborda, se scrollea a mano.
  • Sin JS, y en el HTML del servidor, es la fila quieta con todos los ítems.

Reglas de uso

  • Para una prueba social de marketing (clientes, prensa), no para información que haya que leer: lo que se mueve no se lee.
  • Cada ítem es { id, node, href? }: node puede ser un SVG o un <img> con alt; con href, un link que abre en otra pestaña.
  • speed en píxeles por segundo (40 por defecto): la duración sale del ancho de la tanda (que se vuelve a medir si un logo o la fuente cargan después), así se siente igual con 4 ítems que con 10.
  • La animación es la utilidad animate-marquee de theme.css. Solo por subpath (sebs7n-ui/marquee).

Relacionados

Carousel