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