查看“︁Example:色卡标签”︁的源代码

[[Template:色卡标签]]

一个支持图片/纯色背景、悬停放大与整块点击跳转的色卡标签组件。

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

只传名称，其余使用默认值：

<pre>
{{色卡标签
| 名称 = 东方通合
}}
</pre>

效果：

{{色卡标签
| 名称 = 东方通合
}}

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

<pre>
{{色卡标签
| 链接         = 东方通合
| 背景色       = #57000d
| 水印         = UNITE EAST
| 水印字体     = cinzel
| 名称         = 东方通合
| 标题字体     = noto
| 英文标题     = UNITE EAST
| 英文标题字体 = rubik
| 装饰         = ▼▼▼
| 装饰字体     = rubik
}}
</pre>

效果：

{{色卡标签
| 链接         = 东方通合
| 背景色       = #57000d
| 水印         = UNITE EAST
| 水印字体     = cinzel
| 名称         = 东方通合
| 标题字体     = noto
| 英文标题     = UNITE EAST
| 英文标题字体 = rubik
| 装饰         = ▼▼▼
| 装饰字体     = rubik
}}

==== 更换背景色 ====

<pre>
{{色卡标签
| 链接     = 万类天宥
| 背景色   = #0d2b3e
| 名称     = 万类天宥
| 英文标题 = MYRIAD
| 装饰     = ◆◆◆
}}
</pre>

效果：

{{色卡标签
| 链接     = 万类天宥
| 背景色   = #0d2b3e
| 名称     = 万类天宥
| 英文标题 = MYRIAD
| 装饰     = ◆◆◆
}}

==== 使用背景图片 ====

<pre>
{{色卡标签
| 链接   = 万类天宥
| 图片   = 占位图1.png
| 水印   = MYRIAD
| 名称   = 万类天宥
| 英文标题 = MYRIAD
}}
</pre>

效果：

{{色卡标签
| 链接   = 万类天宥
| 图片   = 占位图1.png
| 水印   = MYRIAD
| 名称   = 万类天宥
| 英文标题 = MYRIAD
}}

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

{| class="wikitable"
! 参数 !! 可选值 !! 默认 !! 说明
|-
| 链接 || 任意页面名或完整 URL || 位格 || 点击卡片跳转的目标
|-
| 背景色 || 任意颜色值 || #57000d || 卡片底色，无图片时显示
|-
| 图片 || 文件名，含扩展名 || 空 || 卡片背景图，传图时铺满卡片并盖住背景色
|-
| 水印 || 任意文字 || 空 || 卡片左侧的大号浅色水印
|-
| 水印字体 || 字体类后缀，如 rubik、noto、cinzel、tesla、ballet、college、chrontor、mono || rubik || 水印字体
|-
| 名称 || 任意文字 || 空 || 中文主标题
|-
| 标题字体 || 字体类后缀 || noto || 中文主标题字体
|-
| 英文标题 || 任意文字 || 空 || 英文副标题
|-
| 英文标题字体 || 字体类后缀 || rubik || 英文副标题字体
|-
| 装饰 || 任意文字 || 空 || 主标题下方的装饰符号
|-
| 装饰字体 || 字体类后缀 || rubik || 装饰符号字体
|}

==== 注意事项 ====

* 卡片悬停时整体放大至 <code>1.08</code> 倍，由 <code>fx-hover-grow</code> 类实现。
* 有图片时图片铺满卡片并盖住背景色；无图片时显示背景色。
* 点击卡片任意位置均触发跳转，交互由覆盖整张卡片的隐藏链接实现，不需要 JS。
* 「链接」传页面名时跳转至对应 wiki 页面，传完整 URL 时跳转至外部网站。
* 卡片内容层设置了 <code>pointer-events:none</code>，确保点击穿透至链接层。
* 组件样式定义在 [[Template:色卡标签/styles.css]]。
* 字体类来自 [[MediaWiki:Citizen.css]]，详见 [[Example:字体调用]]。