模板:Color block

█black

File:Test Template Info-Icon - Version (2).svg 模板文档[查看] [编辑] [历史] [清除缓存]

颜色色块模板

本模板可用于显示CSS颜色名称/16进制颜色值及其对应色块。

用法：

{{Color block|<参数1：颜色值>|[参数2：自定义名称（可选）]|[附加功能参数]}}

• <参数1：颜色值>可使用CSS颜色名称或16进制颜色值。
• [参数2：自定义名称（可选）]可用于显示CSS颜色名称或颜色值以外的自定义内容。
• 附加功能参见#附加功能部分。

{{Color block|color=<颜色值>|text=[自定义名称（可选）]|[附加功能参数]}}

• <颜色值>同以上参数1。
• [自定义名称（可选）]同以上参数2。
• 附加功能参见#附加功能部分。

使用CSS颜色名称

CSS支持的全部颜色名称：W3 CSS color names

用例：

{{Color block|red}}

输出：█red

用例：

{{Color block|color=red}}

输出：█red

使用16进制颜色值

注意：16进制颜色值必须以#字符开头。

用例：

{{Color block|#0000ff}}

输出：█#0000ff

用例：

{{Color block|color=#0000ff}}

输出：█#0000ff

使用自定义名称

您可在CSS颜色名称或16进制值之后，显示自定义的颜色名称。

用例：

{{Color block|#ffbf00|琥珀色}}

输出：█琥珀色

用例：

{{Color block|color=#ffbf00|text=琥珀色}}

输出：█琥珀色

附加功能

颜色名称悬停提示

若使用自定义颜色，您可以使用参数color-tooltip=1来显示CSS颜色名称或16进制颜色值。如果您使用计算机访问维基百科，使用鼠标悬停在颜色名称上，方可看到该颜色名称或颜色值。

用例：

{{Color block|#ffbf00|琥珀色|color-tooltip=1}}

输出：█琥珀色

不输出文本

您可以使用参数no-text=1使之不输出文本内容。此时指定自定义颜色名称的参数2不起作用。

用例：

{{Color block|#ff00ff|no-text=1}}
{{Color block|#ff00ff|品红色|no-text=1}}

输出：█ █

加粗字体

您可以使用参数bold=1实现字体加粗。

用例：

{{Color block|green|bold=1}}

输出：█green

用例：

{{Color block|#0000ff|bold=1}}

输出：█#0000ff

用例：

{{Color block|#ffbf00|琥珀色|bold=1}}

输出：█琥珀色

用例：

{{Color block|#ffbf00|琥珀色|bold=1|color-tooltip=1}}

输出：█琥珀色

模板文档

以下是该模板的模板数据，适用于可视化编辑器等工具。

Color block模板数据

<templatedata>{ "params": { "bold": { "label": "加粗", "description": "是否需要将文本加粗", "type": "boolean" }, "color": { "aliases": [ "1" ], "label": "颜色", "description": "需要显示的颜色，以CSS颜色的形式，可以是名称或16进制值。", "example": "red、yellow、#abc", "type": "string", "suggested": true }, "no-text": { "label": "不显示文本", "description": "是否不显示文本。", "type": "boolean" }, "text": { "aliases": [ "2" ], "label": "文本", "description": "文本内容", "type": "content", "suggested": true }, "color-tooltip": { "label": "颜色提示", "description": "悬念时显示的提示内容。", "type": "content" } }, "description": "显示CSS颜色名称及其对应色块。 ", "format": "inline" }</templatedata>

上述文档嵌入自Template:Color block/doc。（编辑 | 历史）
编者可以在本模板的沙盒（创建 | 镜像）和测试样例（创建）页面进行实验。
请在/doc子页面中添加分类。本模板的子页面。