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

Template: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”