模板:Gauge/doc
跳至導覽
跳至搜尋
本模板用於生成具有大量可定製元素的進度條，可作為條形統計圖或其他需要條狀物的東西的基礎。
注意：
- 本模板會使用一些變量存儲中間結果，請注意可能產生的副作用。
- 存在圓角且進度條足夠短時，本模板會採用overflow:hidden截取正確的形狀（下稱「圓角裁剪」），此時若進度條的樣式帶有shadow屬性會受到影響。
| 具體來說，本模板使用的變量名包括： |
|---|
|
參數
本模板全部參數均為名稱參數。
對於「備註」中註明取值範圍的參數，本模板會在提供的數值超出範圍的情況下強制將數值限制在範圍內。
| 參數名 | 解釋 | 取值 | 默認值 | 備註 |
|---|---|---|---|---|
| base | 進度條的底端的方向 | left、right、top或bottom | left | |
| length | 進度條的總長度 | 數值，單位px | 500 | |
| diameter | 進度條的總寬度 | 數值，單位px | 50 | |
| corner-radius | 進度條的外部圓角半徑 | 數值，單位px | 0 | 不超過length和diameter中較小者的50% 內部圓角半徑會根據此參數自動計算 |
| frame-width | 進度條的邊框寬度 | 數值，單位px | 5 | 不超過length和diameter中較小者的20% |
| gap | 進度條到進度條邊框之間的縫隙 | 數值，單位px | 5 | 不超過length和diameter中較小者的20% |
| progress | 進度比例 | 比例數值，不要輸入百分數 | 0.6 | 不小於0，且若ignore-progress-limit非true則不超過1 |
| frame-style | 邊框的樣式 | CSS樣式 | background:#000 | |
| fill-style | 進度條背景的樣式 | CSS樣式 | background:#CCC | |
| gauge-style | 進度條的樣式 | CSS樣式 | background:#FF0 | |
| gauge-overlay-style | 進度條區域上疊層的樣式 | CSS樣式 | （無） | |
| fill-overlay-style | 背景區域上疊層的樣式 | CSS樣式 | （無） | |
| frame-overlay-style | 整體上疊層的樣式 | CSS樣式 | （無） | |
| ignore-progress-limit | 置為true可使進度比例可以超過1（爆條） | 字符串 | （無） | |
| round-front | 置為true可使進度條前端加圓角 | 字符串 | （無） |
使用例
- 全參數默認：
{{gauge}}- 效果：
- 演示一下三個上疊層的範圍：
{{gauge|gauge-overlay-style=border:3px blue solid;box-sizing:border-box|fill-overlay-style=border:3px green solid;box-sizing:border-box|frame-overlay-style=border:3px red solid;box-sizing:border-box}}- 效果：
- 普通來說，爆條是禁止實現的：
{{gauge|progress=1.5}}- 效果：
- 但是可以讓它實現：
{{gauge|progress=1.5|ignore-progress-limit=true}}- 效果：
- 演示一下進度較低的時候會出現的圓角裁剪：
{{gauge|corner-radius=50|progress=0.01}}- 效果：
- 如果前端也圓角，就會雙向裁剪：
{{gauge|corner-radius=50|progress=0.01|round-front=true}}- 效果：
- 進度較高且前端不圓角的時候會出現的圓角裁剪：
{{gauge|corner-radius=50|progress=0.99}}- 效果：
- 當然，如果允許爆條，就不會做圓角裁剪了，因為那也不過是一種爆條：
{{gauge|corner-radius=50|progress=0.99|ignore-progress-limit=true}}- 效果：
- 嫌不好看？請調整顏色與外觀的參數：
{{gauge|length=300|diameter=10|frame-width=2|gap=0|frame-style=|fill-style=|corner-radius=5|round-front=true|gauge-style=background:#261D85|frame-overlay-style=border:2px #261D85 solid;box-sizing:border-box}}- 效果：
- 還是不好看？CSS漸變陰影貼圖可勁兒往上造就完了：
{{gauge|gauge-style=background:linear-gradient(to top, #652714 0%, #E68C33 100%)|gauge-overlay-style=background:repeating-linear-gradient(to right, rgba(0,0,0,0.4),transparent 5%,transparent 15%,rgba(255,255,255,0.4) 20%),repeating-linear-gradient(to top, rgba(0,0,0,0.4),rgba(0,0,0,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,0.4) 100%)|fill-style=background:linear-gradient(to top, #333352 0%, #5A5AA0 100%)|frame-style=box-shadow:0 0 3px black;background:linear-gradient(to top, #FFDF8D 0%, #FFFFDC 100%)|corner-radius=20}}- 效果：
- 用一個理髮店花柱演示一下其他朝向的進度條：
{{gauge|base=bottom|frame-width=3|gap=0|frame-style=|fill-style=|gauge-style=background:repeating-linear-gradient(45deg, #CF0032, #CF0032 30px, white 30px, white 35px, #3200CF 35px, #3200CF 65px, white 65px, white 70px)|gauge-overlay-style=background:linear-gradient(to right,rgba(0,0,0,0.4),rgba(0,0,0,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0.4) 100%)|frame-overlay-style=border:3px black solid;box-sizing:border-box|progress=0.9}}- 效果：