Neumorphism UI

Marquee

一時停止できる、短いラベルやロゴの補助的な繰り返し表示に使います。

プレビュー

対応技術の一覧

地域別の動作ボタンを使い、技術名を繰り返し表示します。

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/marquee

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

項目、領域名、一時停止と再開のボタン名を渡します。必須情報は別の場所でも提供し、標準のモーション低減設定に従います。

"use client";

import { Marquee } from "@/components/ui/marquee";

export default function Example() {
  return <Marquee items={["React", "Base UI", "Tailwind CSS"]} label="Supported technologies" />;
}

API リファレンス

連続表示のため項目を視覚的に複製しますが、2つ目は aria-hidden で支援技術から除外します。Pause/Resume で停止でき、prefers-reduced-motion では自動的にアニメーションを止めます。

コンポーネントプロパティ型デフォルト説明
Marqueeitems必須readonly ReactNode[]—繰り返し表示する項目一覧です。
Marqueedurationnumber241周期の秒数を指定します。
MarqueedefaultPausedbooleanfalse最初から停止状態で開始します。
Marqueelabelstring"Scrolling content"繰り返し情報領域のアクセシブル名です。
MarqueepauseLabel / resumeLabelstring—動作制御ボタンのアクセシブル名をローカライズします。

アクセシビリティ

  • 01

    2つ目の視覚的コピーは aria-hidden にして同じ項目を二重に読み上げないようにします。

  • 02

    利用者が操作できる一時停止ボタンを常に提供し、状態を aria-pressed で公開します。

  • 03

    prefers-reduced-motion では移動をなくし、最初の項目集合だけを表示します。