多种提示栏

注意:这是本网站使用的组件页面

组件页面一般通过[[include]]方式使用。

请不要随意编辑此页面以免造成不必要的崩溃。

如果你需要报告错误,请前往页面讨论区。

评分: 0+x

开发者信息

此组件由Chris EvertworthChris Evertworth开发。
SenioriouscSenioriousc提供了几类基础的图标和样式。

参数信息与说明

  • 允许使用所有颜色格式,使用 rgb 颜色单位时,仅需填入数值
  • 仅当 <$type-bar> 的值为 custom-bar 时,可以自由选择提示栏颜色与图标。
  • <$type-bar> 的值为 custom-bar 以外时,只需要填入 <title> 以及 <content> 两个参数。

完整参数列表

[[include :arknights:component:notification-bar-base |$type-bar=--] 选择提示栏种类
|leftColor={$leftColor} 左侧栏颜色
|rightColor={$rightColor} 右侧栏颜色
|img={$img} 可以使用本页图片的热链或者完整的文件URL
|imgColor={$imgColor} 图标的颜色,建议为主色调的高暗度值
|title={$title} 标题文字
|escape-toc=true/false 选择标题是否出现在toc中
|content={$content} 提示栏正文,不能使用短链接
]]


默认状态下,提醒栏的宽度是固定为页面正文区域宽度的60%(移动端为100%),如果需要改变显示的长度,请使用如下CSS代码:
.notification {
    min-width: $value; /* 当需要显示的宽度大于60%时 */
    max-width: $value; /* 当需要显示的宽度小于60%时 */
}

组件说明

固有类

本站的提示栏目前共有五个固有类,外观及对应使用方式如下。

将所有的标题和正文文本改成你需要的。

update.svg

本页面内容已经过时
本页面上一次更新至今已经181天,部分内容可能不准确,请谨慎辨别。

[[include :arknights:component:notification-bar-base |update-bar=--]
|title=本页面内容已经过时
|content=本页面上一次更新至今已经181天,部分内容可能不准确,请谨慎辨别。
]]


attention.svg

本页面是重要功能性页面
请不要尝试编辑或者评论此页面,它们的权限已经锁定。

[[include :arknights:component:notification-bar-base |attention-bar=--]
|title=本页面是重要功能性页面
|content=请不要尝试编辑或者评论此页面,它们的权限已经锁定。
]]


availability.svg

此组件的兼容性存在问题
如需使用此组件,请自行承担由于其他用户的浏览器不支持对应效果导致阅读体验变差的风险。

[[include :arknights:component:notification-bar-base |availability-bar=--]
|title=此组件的兼容性存在问题
|content=如需使用此组件,请自行承担由于其他用户的浏览器不支持对应效果导致阅读体验变差的风险。
]]


content.svg

本页面包含严肃内容
在继续阅读前,请确保你已经读过了行为准则中的相关部分。

[[include :arknights:component:notification-bar-base |content-bar=--]
|title=本页面包含严肃内容
|content=在继续阅读前,请确保你已经读过了行为准则中的相关部分。
]]


source.svg

本页面的图片使用方式不是CC BY-NC-SA 4.0协议!
作者保留所有权利,请不要随意使用、引用或者转载此页内容。

[[include :arknights:component:notification-bar-base |source-bar=--]
|title=本页面的图片使用方式不是CC BY-NC-SA 4.0协议!
|content=作者保留所有权利,请不要随意使用、引用或者转载此页内容。
]]


自定义类

此外,你可以使用 <custom-bar> 类别实现自定义的通知栏。例如:

eye.fill.svg

本页面为虚构性内容
本页出现的所有人名、地名、公司组织名皆与现实或者影射目的无关。

[[include :arknights:component:notification-bar-base |custom-bar=--]
|leftColor=108,108,108
|rightColor=224,224,224
|img=https://ark-logistics.wikidot.com/local--files/file:enermy-file-base/eye.fill.svg
|imgColor=12,12,12
|escape-toc=false
|title=本页面为虚构性内容
|content=本页出现的所有人名、地名、公司组织名皆与现实或者影射目的无关。
]]

额外信息

此组件可能还有更新计划,请留意此页面。

除非特别注明,本站内容采用 Creative Commons Attribution-NonCommercial-ShareAlike 4.0 协议授权。