Easy UI

Appearance

BorderBeam 边框光束 ​

为元素添加动态的边框光束扫描效果，支持多条光束、悬停触发和自定义样式。

引入 ​

html
<script
  type="module"
  src="./node_modules/easy-component-ui/dist/components/ea-border-beam.js"
></script>
<script
  type="module"
  src="./node_modules/easy-component-ui/dist/components/ea-card.js"
></script>
html
import 'easy-component-ui/ea-border-beam' import 'easy-component-ui/ea-card'

基础用法 ​

通过 ea-border-beam 包裹需要应用光束效果的内容，默认会有一条光束沿容器边框循环扫描。

Review task status, deployment health, and recent automation activity in one panel. The border beam appears when the pointer moves over this card.
查看代码
html
<ea-border-beam>
  <ea-card header="Workspace overview">
    Review task status, deployment health, and recent automation activity in one
    panel.
  </ea-card>
</ea-border-beam>
<ea-border-beam trigger="hover">
  <ea-card header="Hover over the card">
    The border beam appears when the pointer moves over this card.
  </ea-card>
</ea-border-beam>

多条流光 ​

通过 count 属性设置多条光束，它们会均匀分布在容器边框上同时扫描。

Set count to distribute multiple beams evenly around the container border. Set count to distribute multiple beams evenly around the container border.
查看代码
html
<ea-border-beam count="3">
  <ea-card header="Multiple beams (3)">
    Set count to distribute multiple beams evenly...
  </ea-card>
</ea-border-beam>
<ea-border-beam count="2">
  <ea-card header="Multiple beams (2)">
    Set count to distribute multiple beams evenly...
  </ea-card>
</ea-border-beam>

动画时长 ​

通过 duration 属性控制光束动画的循环时长。

A quick loop for temporary highlights and active modules.
3s
The original pacing for most emphasized containers.
6s
A calmer loop for persistent panels and ambient surfaces.
12s
查看代码
html
<ea-border-beam duration="3">
  <ea-card header="Fast">...</ea-card>
</ea-border-beam>
<ea-border-beam duration="6">
  <ea-card header="Default">...</ea-card>
</ea-border-beam>
<ea-border-beam duration="12">
  <ea-card header="Slow">...</ea-card>
</ea-border-beam>

线宽 ​

通过 line-width 属性控制光束线条的宽度。

Set line-width to match the border width of this container. A thicker border beam for a more prominent highlight effect.
查看代码
html
<ea-border-beam line-width="2">
  <ea-card header="Custom line width">...</ea-card>
</ea-border-beam>
<ea-border-beam line-width="3">
  <ea-card header="Wider line">...</ea-card>
</ea-border-beam>

尺寸 ​

通过 size 属性控制光束可见段的长度。

Uses the default 100px visible beam segment. Keeps the highlight shorter for dense card groups. Creates a longer highlight for wider feature panels.
查看代码
html
<ea-border-beam>
  <ea-card header="Default (100px)">...</ea-card>
</ea-border-beam>
<ea-border-beam size="56">
  <ea-card header="Compact (56px)">...</ea-card>
</ea-border-beam>
<ea-border-beam size="160">
  <ea-card header="Extended (160px)">...</ea-card>
</ea-border-beam>

BorderBeam API ​

BorderBeam Attributes ​

参数说明类型可选值默认值
count光束数量number—1
trigger触发方式string"" / "hover"""
size光束指示器尺寸，单位 pxnumber—100
line-width光束指示器线条宽度，单位 pxnumber—1
duration光束动画持续时间，单位 snumber—10
start-delay光束动画开始延迟，单位 snumber—0

BorderBeam CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container容器元素
indicator光束指示器元素

BorderBeam Slots ​

名称说明
-默认插槽，需要应用边框光束效果的内容

BorderBeam CSS Custom Properties ​

属性说明默认值
--ea-border-beam-indicator-size光束指示器尺寸100px
--ea-border-beam-indicator-color光束指示器颜色渐变linear-gradient(to right, transparent 50%, var(--blue-500))
--ea-border-beam-indicator-line-width光束指示器线条宽度1px
--ea-border-beam-duration光束动画持续时间10s
--ea-border-beam-start-delay光束动画开始延迟0s
--ea-border-beam-initial-distance光束初始偏移距离0%
--ea-border-beam-border-radius组件边框圆角var(--border-radius-sm)
--ea-border-beam-font-size组件字体大小var(--font-size-md)
--ea-border-beam-transition组件过渡动画var(--transition-normal)
--ea-border-beam-text文字颜色var(--grey-900)
--ea-border-beam-bg背景颜色var(--blue-500)
--ea-border-beam-border-color边框颜色var(--grey-300)