模板: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子頁面中添加分類。本模板的子頁面。