置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Gauge

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳到导航 跳到搜索
Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]

本模板用于生成具有大量可定制元素的进度条,可作为条形统计图或其他需要条状物的东西的基础。

注意:

  • 本模板会使用一些变量存储中间结果,请注意可能产生的副作用。
  • 存在圆角且进度条足够短时,本模板会采用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}}
    • 效果: