模板:Gauge
跳到导航
跳到搜索
模板文档本模板用于生成具有大量可定制元素的进度条，可作为条形统计图或其他需要条状物的东西的基础。
注意：
- 本模板会使用一些变量存储中间结果，请注意可能产生的副作用。
- 存在圆角且进度条足够短时，本模板会采用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}}- 效果：