模板:Progress bar text overlay

模板文档[查看] [编辑] [历史] [清除缓存]

本模板可用于展示在正中央显示进度数字的进度条。

使用方法

{{PBTO|[进度]|[type=fraction]|[其他可选参数]}}

可选参数

数据类型

• type：指定是否以分数形式显示。如果进度条的进度数字是分数（格式：分子 / 分母），请务必填入type=fraction，否则无法正确显示进度。（默认值为type=percentage）
• round：在指定type=fraction时，如需同时显示百分比，则使用此参数指定百分比小数点后的位数。小数点后末尾的0会保留。

布局

• block：指定是否显示为块级元素，默认为否。如需显示为块级元素，请填入block=1。
• width：指定进度条的宽度，默认为400px。必须使用%、em、px、pt之一为长度单位，否则会导致显示效果异常。
• height：指定进度条的高度，默认为1.5em。必须使用em、px、pt之一为长度单位，否则会导致显示效果异常。
• font_size：指定进度条数字的大小，默认为1em。必须使用em、px、pt之一为长度单位，否则会导致显示效果异常。

边框样式

以下各项中需要输入颜色的，可填写Extended color keywords中支持的颜色名或16进制值。

• border：更改边框样式，包括边框宽度、类型和颜色。需满足CSS border shorthands中规定的格式。

颜色

以下各项中需要输入颜色的，可填写Extended color keywords中支持的颜色名或16进制值。

• bg_color_incomplete：未完成部分的背景色。默认为透明（transparent）。
• fg_color_incomplete：未完成部分的前景色。默认为█black。
• bg_color_complete：已完成部分的背景色。默认为█green。
• fg_color_complete：已完成部分的前景色。默认为█white。

用例

默认调用

{{PBTO}} 0% 0% 0%

设置进度

百分数进度：50%	{{PBTO|50%}} 50% 50% 50%
百分数进度：50.00%	{{PBTO|50.00%}} 50.00% 50.00% 50.00%
分数进度：2/4	{{PBTO|2/4|type=fraction}} 2/4 2/4 2/4
分数进度：2/4（显示百分比）	{{PBTO|2/4|type=fraction|round=0}} 2/4 (50%) 2/4 (50%) 2/4 (50%)
分数进度：2/4（百分比保留2位小数）	{{PBTO|2/4|type=fraction|round=2}} 2/4 (50.00%) 2/4 (50.00%) 2/4 (50.00%)

改变布局

显示为块状	对比效果： 未设置为块状 左边的内容{{PBTO|50%|width=80px}}右边的内容 左边的内容 50% 50% 50% 右边的内容 设置为块状 上一段的内容{{PBTO|50%|width=80px|block=1}}下一段的内容 上一段的内容 50% 50% 50% 下一段的内容
设置宽度	按长度 {{PBTO|50%|width=200px}} 50% 50% 50% 按百分比 {{PBTO|50%|width=60%}} 50% 50% 50%
设置高度	{{PBTO|50%|height=40px}} 50% 50% 50%
设置文字大小	注意：如以em为font_size参数的单位，则文字大小根据正文文字大小放缩确定。 {{PBTO|50%|height=3em|font_size=2em}} 50% 50% 50% {{PBTO|50%|height=1.2em|font_size=0.8em}} 50% 50% 50%

改变边框样式

{{PBTO|50%|border=5px dotted red}} 50% 50% 50%

改变颜色

{{PBTO|50% |bg_color_incomplete=khaki |fg_color_incomplete=#F00 |bg_color_complete=purple |fg_color_complete=#FFCD00 }} 50% 50% 50%

相关模板

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