BorderBeam 边框流光

为容器边框提供持续流动的装饰性高亮效果，适合登录面板、推荐卡片、重点 CTA 区域等场景。

何时使用

  • 需要为容器添加持续流动的装饰性高亮边框时。
  • 用于登录面板、推荐卡片、重点 CTA 等需要视觉聚焦的场景。
  • 需要自定义流光颜色或渐变停靠点时。
顺时针
逆时针

基础用法

<script setup lang="ts">
import { BorderBeam } from "@reglow/reui";
</script>

<template>
  <BorderBeam>
    <div class="w-80 p-6 rounded-lg border bg-card shadow-sm">
      <h3 class="text-lg font-medium mb-2">边框流光效果</h3>
      <p class="text-sm text-muted-foreground">这是一个带有流光边框的容器</p>
    </div>
  </BorderBeam>

  <!-- 自定义颜色（单色 / 渐变） -->
  <BorderBeam color="#ff6b00">...</BorderBeam>
  <BorderBeam
    :color="[
      { color: '#ff0000', percent: 0 },
      { color: '#0000ff', percent: 100 },
    ]"
  >
    ...
  </BorderBeam>
</template>

导入

import { BorderBeam } from "@reglow/reui";

Props

属性类型默认值说明
colorstring | { color: string; percent: number }[]#1677ff流光颜色，支持渐变停靠点数组
countnumber1流光数量，多条流光沿边框均匀分布
durationnumber6流光完成一圈动画的时间（秒）
lineWidthnumber | string1流光线宽，数字按像素处理
sizenumber | string100流光可见段的尺寸，数字按像素处理
outsetnumber | string0流光层相对容器边缘的外扩距离（裁剪容器内设 0）
reversebooleanfalse流光逆时针旋转，同页多个流光时可形成方向差异
Toggle 开关按钮
可切换按下/弹起状态的按钮
MasonryGrid 瀑布流
响应式瀑布流布局组件，支持图片懒加载、选择、预览、删除、无限滚动等。