@daflow-ui/ui-marquee

@daflow-ui/ui-marquee

Marquee component for DaFlow UI component library.

Installation

pnpm add @daflow-ui/ui-marquee

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-marquee/style.css';

在组件中使用：

<script setup lang="ts">
import { DfMarquee, DfMarqueeItem } from '@daflow-ui/ui-marquee';
</script>

<template>
  <DfMarquee :speed="80">
    <DfMarqueeItem v-for="logo in logos" :key="logo">
      <div>{{ logo }}</div>
    </DfMarqueeItem>
  </DfMarquee>
</template>

Props

DfMarquee

Name	Type	Default	Description
speed	number	50	滚动速度（px/s），不是动画时长（ms）
gap	number	-	跑马灯项之间的间距（px），不传则使用组件 CSS 变量
pauseOnInteraction	boolean	false	hover/focus 时暂停滚动
showEdge	boolean	false	是否显示两侧渐隐遮罩

DfMarqueeItem

纯容器组件，无额外 props。

Development

Install dependencies

pnpm install

Start playground (at monorepo root)

cd ../..
pnpm dev

组件会自动出现在 playground 导航中（通过 dev/index.vue）。

Build

pnpm build

Type check

pnpm typecheck

Lint

pnpm lint
pnpm lint:fix

License

MIT