lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
39 lines • 1.78 kB
TypeScript
export interface MarqueeMenuItemData {
/** Display name shown in the menu list */
name: string;
/** Image URL shown in the scrolling marquee row */
src: string;
/** Image alt text (defaults to name) */
alt?: string;
}
export interface MarqueeMenuProps {
/** Items to display — each item gets one row in the menu and one marquee strip */
items: MarqueeMenuItemData[];
/** Zero-based index of the initially active item */
defaultIndex?: number;
/** Height of each row in pixels (menu row + marquee row are the same height) */
rowHeight?: number;
/** Width of each marquee image in pixels */
imageWidth?: number;
/** Gap between marquee elements in pixels */
marqueeGap?: number;
/** Marquee scroll duration in seconds (lower = faster) */
marqueeDuration?: number;
/** How many copies of the strip to render for seamless looping (min 2) */
copies?: number;
/** Additional className on the root wrapper */
className?: string;
/** Callback fired when the active item changes */
onSelect?: (index: number, item: MarqueeMenuItemData) => void;
/** Text alignment of menu labels */
align?: "left" | "center" | "right";
/** Whether to show a divider line between rows */
showDividers?: boolean;
/** Custom menu item class */
menuItemClassName?: string;
/** Marquee panel background colour (Tailwind class) */
marqueeBg?: string;
}
declare const MarqueeMenu: ({ items, defaultIndex, rowHeight, imageWidth, marqueeGap, marqueeDuration, copies, className, onSelect, align, showDividers, menuItemClassName, marqueeBg, }: MarqueeMenuProps) => import("react/jsx-runtime").JSX.Element | null;
export default MarqueeMenu;
//# sourceMappingURL=marquee-menu.d.ts.map