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 组件。