本站页面（多半）转载自萌娘百科的同名页面，依CC BY-NC-SA 3.0引入，贡献者可以在历史页查询。
因各种原因页面内容可能和源页面有所出入，非本站特有页面内容请以萌娘百科为准。
置顶公告：【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好～！欢迎来到萌娘百科镜像站！如需查看或编辑，请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关，请注意分别。

模板:Gauge/doc

萌娘百科，萬物皆可萌的百科全書！轉載請標註來源頁面的網頁連結，並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

本模板用於生成具有大量可定製元素的進度條，可作為條形統計圖或其他需要條狀物的東西的基礎。

注意：

  • 本模板會使用一些變量存儲中間結果，請注意可能產生的副作用。
  • 存在圓角且進度條足夠短時，本模板會採用overflow:hidden截取正確的形狀（下稱「圓角裁剪」），此時若進度條的樣式帶有shadow屬性會受到影響。
具體來說，本模板使用的變量名包括：
  • length
  • diameter
  • corner-radius
  • frame-width
  • gap
  • progress
  • corner-radius-fill
  • corner-radius-gauge
  • fill-length
  • fill-diameter
  • gauge-length
  • gauge-diameter
  • gauge-gap
  • progress-length
  • progress-clip-required
  • gauge-radii
  • lengthwise
  • diameterwise
  • mainwise
  • subwise

參數

本模板全部參數均為名稱參數。

對於「備註」中註明取值範圍的參數，本模板會在提供的數值超出範圍的情況下強制將數值限制在範圍內。

參數名 解釋 取值 默認值 備註
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}}
    • 效果：
取自「https://moegirl.uk/index.php?title=Template:Gauge/doc&oldid=110783」