查看“︁Example:悬停变换”︁的源代码


一个支持图标切换、边缘发光、自定义配色的按钮组件。

==== 完整调用示例 ====

<pre>
{{悬停变换
| icon       = ☰
| iconActive = ✕
| swap       = on
| glow       = pulse
| bg         = #56000d
| color      = #fff
}}
</pre>

==== 参数说明 ====

{| class="wikitable"
! 参数 !! 可选值 !! 默认 !! 说明
|-
| <code>icon</code> || 任意字符 || <code>●</code> || 默认显示的图标
|-
| <code>iconActive</code> || 任意字符 || <code>✕</code> || 悬停时显示的图标，仅 <code>swap=on</code> 时有效
|-
| <code>swap</code> || <code>on</code> / <code>off</code> || <code>on</code> || 是否启用悬停图标切换
|-
| <code>glow</code> || <code>pulse</code> / <code>glow</code> / <code>none</code> || <code>pulse</code> || 图标发光模式：呼吸 / 静态 / 不发光
|-
| <code>bg</code> || 任意颜色值 || 无 || 覆盖背景色，不填则用默认主题色
|-
| <code>color</code> || 任意颜色值 || 无 || 覆盖文字色
|}

==== 最简调用 ====

只写必填的图标，其余用默认值：

<pre>{{悬停变换|icon=☰|iconActive=✕}}</pre>

效果：{{悬停变换|icon=☰|iconActive=✕}}

==== 其他常见用法 ====

{| class="wikitable"
! 场景 !! 写法
|-
| 不切换图标 || 加 <code>swap=off</code>
|-
| 静态发光 || 加 <code>glow=glow</code>
|-
| 不发光 || 加 <code>glow=none</code>
|-
| 自定义配色 || 加 <code>bg=#2a0006|color=#ffcc00</code>
|}