Skip to content

KaGlowyCard 发光卡片

具有鼠标跟随光晕效果的卡片组件,支持自定义颜色、光晕大小和边框样式。

使用场景

  • 具有鼠标跟随光晕效果的卡片组件,支持自定义颜色、光晕大小和边框样式。
  • 常见用法:自定义配置、多卡片展示、紫色主题卡片、橙色主题。

Props

参数说明类型默认值
hue色相 (0-360)number210
saturation饱和度 (0-100)number100
lightness亮度 (0-100)number50
size光晕尺寸number200
border边框宽度number2
radius圆角大小 (px)number10

Slots

组件名称说明
KaGlowyCardWrapperdefault默认插槽,放置 KaGlowyCard
KaGlowyCarddefault默认插槽,放置卡片内容

API

KaGlowyCard

无 Props,仅作为内容容器使用

注意事项

  • 无特殊限制,建议按示例中的受控方式接入,并结合业务容器尺寸验证最终展示效果。

KaGlowyCardWrapper 发光卡片容器

KaGlowyCard 的外层容器组件,用于管理光晕效果的配置和鼠标跟随行为。必须与 KaGlowyCard 配合使用。

使用场景

  • KaGlowyCard 的外层容器组件,用于管理光晕效果的配置和鼠标跟随行为。必须与 KaGlowyCard 配合使用。

Props

参数说明类型默认值
hue色相 (0-360)number210
saturation饱和度 (0-100)number100
lightness亮度 (0-100)number50
size光晕尺寸number200
border边框宽度number2
radius圆角大小 (px)number10

Slots

名称说明
default默认插槽,放置 KaGlowyCard 组件

注意事项

配合 KaGlowyCard 使用

完整示例请参考 KaGlowyCard 组件。